Skip to content

Commit

Permalink
docs(colors): Update content to support tokens. (#4143)
Browse files Browse the repository at this point in the history 
* docs(colors): Update content to support tokens.

* Adds a little content and updates and image.
  • Loading branch information
@edonehoo
edonehoo authored Jul 25, 2024
1 parent f443609 commit ea332d8
Show file tree
Hide file tree
Showing 12 changed files with 139 additions and 221 deletions.
8 changes: 4 additions & 4 deletions ...documentation-site/patternfly-docs/content/design-guidelines/styles/colors/ColorFamily.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function ColorFamily({
onClick={expandAll}
>
<h3 className="pf-v6-c-title pf-m-xl">
<AngleRightIcon className="pf-v6-c-accordion__toggle-icon ws-color-family-toggle-icon" />
<AngleRightIcon className="pf-v6-c-accordion__toggle-icon ws-color-family-toggle-icon" />
{title}
</h3>
</dt>
Expand All @@ -71,10 +71,10 @@ export function ColorFamily({
itemStyle.boxShadow = `var(${token.name})`;
}
else if (getContrastRatio(token.value, '#151515') <= 4.5) {
// itemStyle.color = 'var(--pf-v6-global--Color--light-100)';
itemStyle.color = 'var(--pf-v6-global--Color--light-100)';
}
else if (getContrastRatio(token.value, '#151515') > 4.5) {
// itemStyle.color = 'var(--pf-v6-global--palette--black-900)';
itemStyle.color = 'var(--pf-v6-global--palette--black-900)';
}
const expandedStyle = {};
if (isExpanded && !isShadows) {
Expand Down Expand Up @@ -112,7 +112,7 @@ export function ColorFamily({
</dd>
{isExpanded && (
<dd className={`${tokenClass} ws-color-family-content`} style={expandedStyle}>
<label className="ws-color-family-label">CSS variables</label>
<label className="ws-color-family-label">Tokens</label>
{Object.values(rootTokens)
.filter(t => t.value === token.value)
.map(t => t.name)
Expand Down
20 changes: 15 additions & 5 deletions ...ocumentation-site/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.ws-color-swatch {
display: flex;
margin-top: var(--pf-t--global--spacer--md);
margin-bottom: var(--pf-t--global--spacer--lg);
}

.ws-color-swatch > svg {
Expand All @@ -22,8 +22,9 @@
}

.ws-color-swatch-description-label {
font-size: var(--pf-t--global--font--size--xs);
font-size: var(--pf-t--global--font--size--sm);
font-weight: var(--pf-t--global--font--weight--body--bold);
margin-bottom: var(--pf-t--global--spacer--xs);
}

.ws-color-swatch-popover {
Expand All @@ -33,11 +34,20 @@
.ws-color-swatch-popover-label {
display: inline-block;
padding-top: var(--pf-t--global--spacer--md);
padding-bottom: var(--pf-t--global--spacer-xs);
padding-bottom: var(--pf-t--global--spacer-sm);
font-weight: bold;
}

.ws-color-swatch-popover-code {
white-space: nowrap;
margin-bottom: var(--pf-t--global--spacer--md);
margin-bottom: var(--pf-t--global--spacer--sm);
}

.ws-color-swatch-usage {
max-width: 25rem;
display: inline-block;
word-wrap: break-word;
}

.ws-color-swatch-image{
margin-right: var(--pf-t--global--spacer--md);
}
34 changes: 8 additions & 26 deletions ...documentation-site/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,6 @@ import { Popover, Button } from '@patternfly/react-core';
import { normalizeColor, tokenName } from './helpers';
import './ColorSwatch.css';

const handSVG = (
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(22, 22)">
<g transform="translate(-108.000000, -493.000000)">
<g transform="translate(80.000000, 465.000000)">
<g transform="translate(28.000000, 28.000000)">
<path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" fill="#FFFFFF" fillRule="nonzero"></path>
<path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" stroke="#000000" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round"></path>
<line x1="11.6" y1="12.7" x2="11.6" y2="9.3" id="Path1" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
<line x1="9.6" y1="12.7" x2="9.5" y2="9.3" id="Path2" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
<line x1="7.6" y1="9.3" x2="7.6" y2="12.7" id="Path3" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
</g>
</g>
</g>
</g>
);

export function ColorSwatch({
label,
color,
Expand All @@ -30,14 +14,11 @@ export function ColorSwatch({
const token = tokens[":where(:root)"][tokenName(color)];
const popoverContent = (
<div className="ws-color-swatch-popover">
<label className="ws-color-swatch-popover-label">Global CSS variable</label>
<label className="ws-color-swatch-popover-label">Token</label>
<p>
<code className="ws-color-swatch-description-code ws-color-swatch-popover-code ws-code pf-v6-u-font-size-xs">
{color}
</code>
<p>
<a href='/tokens/all-patternfly-tokens/'>
See all tokens
</a>
</p>
{token && (
<React.Fragment>
Expand All @@ -49,19 +30,21 @@ export function ColorSwatch({
</p>
</React.Fragment>
)}
<label className="ws-color-swatch-popover-label">Usage</label>
<p>{children}</p>
<p><label className="ws-color-swatch-popover-label">Usage</label></p>
<p className="ws-color-swatch-usage">{children}</p>
</div>
);

return (
<div className="ws-color-swatch">
<Popover
position="right"
aria-label="Global CSS variable"
aria-label="Token"
bodyContent={popoverContent}
footerContent={<a href="/tokens/all-patternfly-tokens">All tokens</a>}
hasAutoWidth
>
<Button variant="plain" aria-label={`Global CSS variable info for ${color}`}>
<Button className="ws-color-swatch-image" variant="plain" aria-label={`Token info for ${color}`}>
<svg
width="44px"
height="44px"
Expand All @@ -74,7 +57,6 @@ export function ColorSwatch({
r="22"
// style={{ fill: isBoxShadow ? 'white' : `var(${color})`, stroke: 'var(--pf-v6-global--palette--black-300)' }}
/>
{label === 'Hover' && handSVG}
</svg>
</Button>
</Popover>
Expand Down
Loading

0 comments on commit ea332d8

Please sign in to comment.