Skip to content

Commit

Permalink
docs(colors)!: remove old colors and convert to input and show figma …
Browse files Browse the repository at this point in the history
…token (#1711)

* refactor(colors)!: remove deprecated and legacy colors

* docs(colors): convert to input colors and show figma token
jinlee93 authored Jul 26, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 26d1694 commit c9a5079
Showing 11 changed files with 174 additions and 254 deletions.
26 changes: 26 additions & 0 deletions .storybook/components/ColorList/ColorList.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.color-list__label {
width: fit-content;
padding: var(--eds-size-half);
border-radius: var(--eds-theme-box-button-border-radius);

font: var(--eds-theme-typography-label-md-subtle);
color: rgb(235, 87, 87);

background-color: var(--eds-theme-color-background-neutral-subtle);
}

.color-list__input {
width: 100%;
height: 5rem;
}

.color-list__input::-webkit-color-swatch {
border-color: transparent;
}
.color-list__input::-webkit-color-swatch-wrapper {
padding: 0;
}

.color-list__input::-moz-color-swatch {
border-color: transparent;
}
57 changes: 33 additions & 24 deletions .storybook/components/ColorList/ColorList.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,42 @@
import React, { Component } from 'react';
import { Grid } from '../../../src';
import { TokenSpecimen } from '../TokenSpecimen/TokenSpecimen';
import React from 'react';
import styles from './ColorList.module.css';

type ListItem = {
name: string;
value: any;
value: string;
figmaToken?: string;
tailwindClass?: string;
};

type Props = {
listItems: ListItem[];
};

export class ColorList extends Component<Props> {
render() {
return (
<Grid>
{this.props.listItems.map(function (listItem) {
return (
<TokenSpecimen
inlineStyles={{
backgroundColor: `var(${listItem.name})`,
}}
key={listItem.name}
name={listItem.name}
value={listItem.value}
/>
);
})}
</Grid>
);
}
}
export const ColorList = (props: Props) => (
<div className="flex flex-col gap-4">
{props.listItems.map(function (listItem) {
return (
<div className="bg-neutral-default flex gap-4 p-4" key={listItem.name}>
<div className="flex w-80 flex-col gap-1">
<label
className={styles['color-list__label']}
htmlFor={listItem.name}
>
<code>{listItem.name}</code>
</label>
{listItem.figmaToken && <span>{listItem.figmaToken}</span>}
{listItem.tailwindClass && <span>{listItem.tailwindClass}</span>}
<code>{listItem.value}</code>
</div>
<input
className={styles['color-list__input']}
id={listItem.name}
readOnly
type="color"
value={listItem.value}
/>
</div>
);
})}
</div>
);
37 changes: 0 additions & 37 deletions .storybook/components/DesignTokens/Tier1/Colors.jsx

This file was deleted.

38 changes: 38 additions & 0 deletions .storybook/components/DesignTokens/Tier1/Colors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import '../DesignTokens.css';
import { Section } from '../../../../src';
import filterTokens from '../../../util/filterTokens';
import { ColorList } from '../../ColorList/ColorList';

export const Tier1Colors = () => {
const getListItems = (filterTerm: string, figmaTokenHeader: string) =>
filterTokens(filterTerm).map(({ name, value }) => ({
name,
value,
figmaToken:
figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
}));
return (
<div>
<Section title="Neutral Colors">
<ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
</Section>
<Section title="Brand Colors">
<ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
</Section>
<Section className="flex flex-col gap-3" title="Other Colors">
<ColorList
listItems={getListItems('eds-color-other-orange', 'orange')}
/>
<ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
<ColorList
listItems={getListItems('eds-color-other-yellow', 'yellow')}
/>
<ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
<ColorList
listItems={getListItems('eds-color-other-lemon', 'supporting')}
/>
</Section>
</div>
);
};
2 changes: 0 additions & 2 deletions .storybook/components/TokenSpecimen/TokenSpecimen.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import '../../../src/design-tokens/mixins.css';

.token-specimen {
border: 1px solid var(--eds-theme-color-border-neutral-subtle);
box-shadow: 1px solid var(--eds-box-shadow-md);
156 changes: 77 additions & 79 deletions .storybook/components/TokenSpecimen/TokenSpecimen.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import React, { Component } from 'react';
import React from 'react';
import './TokenSpecimen.css';

type Props = {
@@ -14,86 +14,84 @@ type Props = {
behavior?: 'stacked';
};

export class TokenSpecimen extends Component<Props> {
render() {
const componentClassName = clsx('token-specimen', this.props.className, {
'token-specimen--stacked': this.props.behavior === 'stacked',
'token-specimen--inverted': this.props.name.includes('inverse'),
});
export const TokenSpecimen = (props: Props) => {
const componentClassName = clsx('token-specimen', props.className, {
'token-specimen--stacked': props.behavior === 'stacked',
'token-specimen--inverted': props.name.includes('inverse'),
});

let sample;
let sample;

if (this.props.variant === 'typography-title') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--typography-title ' +
this.props.specimenClassName
}
contentEditable
style={this.props.inlineStyles}
suppressContentEditableWarning
>
AaBbCcDdEeFfGg
</div>
);
} else if (this.props.variant === 'typography-body') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--typography-body ' +
this.props.specimenClassName
}
contentEditable
style={this.props.inlineStyles}
suppressContentEditableWarning
>
Almost before we knew it, we had left the ground.
</div>
);
} else if (this.props.variant === 'animation-fade') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-fade ' +
this.props.specimenClassName
}
style={this.props.inlineStyles}
></div>
);
} else if (this.props.variant === 'animation-move') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-move ' +
this.props.specimenClassName
}
style={this.props.inlineStyles}
></div>
);
} else {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box ' +
this.props.specimenClassName
}
style={this.props.inlineStyles}
>
{this.props.children}
</div>
);
}

return (
<div className={componentClassName}>
<div className="token-specimen__info">
<code className="token-specimen__name">{this.props.name}</code>
<code className="token-specimen__value">{this.props.value}</code>
<p className="token-specimen__comment">{this.props.comment}</p>
</div>
<div className="token-specimen__body">{sample}</div>
if (props.variant === 'typography-title') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--typography-title ' +
props.specimenClassName
}
contentEditable
style={props.inlineStyles}
suppressContentEditableWarning
>
AaBbCcDdEeFfGg
</div>
);
} else if (props.variant === 'typography-body') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--typography-body ' +
props.specimenClassName
}
contentEditable
style={props.inlineStyles}
suppressContentEditableWarning
>
Almost before we knew it, we had left the ground.
</div>
);
} else if (props.variant === 'animation-fade') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-fade ' +
props.specimenClassName
}
style={props.inlineStyles}
></div>
);
} else if (props.variant === 'animation-move') {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-move ' +
props.specimenClassName
}
style={props.inlineStyles}
></div>
);
} else {
sample = (
<div
className={
'token-specimen__sample token-specimen__sample--box ' +
props.specimenClassName
}
style={props.inlineStyles}
>
{props.children}
</div>
);
}
}

return (
<div className={componentClassName}>
<div className="token-specimen__info">
<code className="token-specimen__name">{props.name}</code>
<code className="token-specimen__value">{props.value}</code>
<p className="token-specimen__comment">{props.comment}</p>
</div>
<div className="token-specimen__body">{sample}</div>
</div>
);
};
13 changes: 0 additions & 13 deletions .storybook/data/tokens.json
Original file line number Diff line number Diff line change
@@ -66,19 +66,6 @@
"eds-color-other-ruby-600": "#D41E52",
"eds-color-other-ruby-700": "#BD0044",
"eds-color-other-ruby-800": "#8F0134",
"eds-color-highlight-100": "#FF9FEC",
"eds-color-highlight-200": "#FFBEAA",
"eds-color-highlight-300": "#FCFF00",
"eds-color-highlight-400": "#9DFFA4",
"eds-color-highlight-500": "#00F1FF",
"eds-color-highlight-600": "#CFC9FF",
"eds-color-info-100": "#F1F9FF",
"eds-color-info-200": "#B0D5FF",
"eds-color-info-300": "#7FB9FD",
"eds-color-info-400": "#5CA7FF",
"eds-color-info-500": "#328EFB",
"eds-color-info-600": "#1977CD",
"eds-color-info-700": "#0563B8",
"eds-l-max-width": "71.25rem",
"eds-l-sidebar-width": "13.5rem",
"eds-l-linelength-width": "36rem",
Loading

0 comments on commit c9a5079

Please sign in to comment.