From afecb9cff3d6f7e569bca7e8919225524fb56077 Mon Sep 17 00:00:00 2001 From: SimeonC <1085899+SimeonC@users.noreply.github.com> Date: Wed, 29 May 2024 14:01:20 +0900 Subject: [PATCH] fix: add color alias for surface-raised-active-text --- .github/workflows/pull_requests.yml | 2 +- lerna.json | 2 +- package-lock.json | 90 ++--------------- system/core/scripts/updateFromFigma.mjs | 17 +++- system/core/src/themeVariables/theme.ts | 4 + system/core/src/themeVariables/types.gen.ts | 1 + system/stories/package.json | 12 +-- system/stories/src/Theming.stories.tsx | 104 ++++++++++++++++---- 8 files changed, 121 insertions(+), 111 deletions(-) diff --git a/.github/workflows/pull_requests.yml b/.github/workflows/pull_requests.yml index 7b8bc1110..7c5a8909f 100644 --- a/.github/workflows/pull_requests.yml +++ b/.github/workflows/pull_requests.yml @@ -177,7 +177,7 @@ jobs: run: npm ci - name: Build and Publish to Chromatic - uses: chromaui/action@v1 + uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} buildScriptName: 'build' diff --git a/lerna.json b/lerna.json index c7772e76c..5adf6ddeb 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "packages": ["system/*", "website"], + "packages": ["system/*"], "version": "independent", "command": { "publish": { diff --git a/package-lock.json b/package-lock.json index ef8b06677..be5f41f8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54907,12 +54907,12 @@ "@storybook/theming": "7.0.0-rc.4", "@tablecheck/babel-preset": "1.1.0", "@tablecheck/locales": "1.1.1", - "@tablecheck/tablekit-core": "^2", - "@tablecheck/tablekit-css": "^2", - "@tablecheck/tablekit-react": "^2", - "@tablecheck/tablekit-react-css": "^2", - "@tablecheck/tablekit-react-datepicker": "^2", - "@tablecheck/tablekit-react-select": "^2", + "@tablecheck/tablekit-core": "^3", + "@tablecheck/tablekit-css": "^3", + "@tablecheck/tablekit-react": "^3", + "@tablecheck/tablekit-react-css": "^3", + "@tablecheck/tablekit-react-datepicker": "^3", + "@tablecheck/tablekit-react-select": "^3", "@vitejs/plugin-react": "3.1.0", "chokidar": "3.5.3", "concurrently": "8.2.2", @@ -55721,84 +55721,6 @@ "url": "https://opencollective.com/storybook" } }, - "system/stories/node_modules/@tablecheck/tablekit-core": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-core/-/tablekit-core-2.0.1.tgz", - "integrity": "sha512-kdofXb0wKnPNqGvfBY4zTNmR+qBKHC4yekQSwbI+AGQ8hyIigD7tXbPyTLWlDuagPmw5t4edUsWIJOCHAgJFVA==", - "dev": true, - "dependencies": { - "csstype": "3.1.1" - } - }, - "system/stories/node_modules/@tablecheck/tablekit-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-css/-/tablekit-css-2.0.1.tgz", - "integrity": "sha512-Ob0foSYbRYTwrHanUFvxMUJX7CaFC5L1jCS6W5BRNvqRKRuHZ9sc09IdOj+6Vf1mJY0ZUCjroBwQYhfColTclQ==", - "dev": true - }, - "system/stories/node_modules/@tablecheck/tablekit-react": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-react/-/tablekit-react-2.0.1.tgz", - "integrity": "sha512-SeQ9ZQp1azrLeFUiImfhiWVSaRc73qtZJzo2T72Rw5On4fdSR0WHVMOMWkp1ak+ggqtkumykBC326e2jsSHyhA==", - "dev": true, - "dependencies": { - "@tablecheck/tablekit-core": "^2.0.1" - }, - "peerDependencies": { - "@carbon/icons-react": "11", - "@emotion/react": "11", - "@emotion/styled": "11", - "react": ">=17", - "react-dom": ">=17" - } - }, - "system/stories/node_modules/@tablecheck/tablekit-react-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-react-css/-/tablekit-react-css-2.0.1.tgz", - "integrity": "sha512-nNUEJAzv1plqRUXkmaMLQ4CFdOaXN/Cjyq40IwD52dLjELHLfzxkIX4EmZTA7CrAKb/wEtYSCxgZYllutFJKxw==", - "dev": true, - "dependencies": { - "@tablecheck/tablekit-core": "^2.0.1", - "@tablecheck/tablekit-css": "^2.0.1" - }, - "peerDependencies": { - "@carbon/icons-react": "11", - "react": ">=17", - "react-dom": ">=17" - } - }, - "system/stories/node_modules/@tablecheck/tablekit-react-datepicker": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-react-datepicker/-/tablekit-react-datepicker-2.0.1.tgz", - "integrity": "sha512-m6DBSRhRvgX/uzZOfZdRfGsf1DB6ZVlNHsnF/nuvrJz2xukar/O9NIwwVvnQ+qYigQtWS+FsgsQHQmYqOnrQBw==", - "dev": true, - "peerDependencies": { - "@carbon/icons-react": "^11", - "@emotion/react": "^11", - "@emotion/styled": "^11", - "@tablecheck/tablekit-react": "*", - "date-fns": "2.x.x", - "dayzed": "3.x.x", - "react": ">=17", - "react-dom": ">=17" - } - }, - "system/stories/node_modules/@tablecheck/tablekit-react-select": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@tablecheck/tablekit-react-select/-/tablekit-react-select-2.0.1.tgz", - "integrity": "sha512-EZYkWjZpEOgt1mOPw7m1MzkQ9NYDaeM+2fy45382/vJPNI5uBmKXWyparh2WV12+QP3wcEZU9mn5GtDe+JADyQ==", - "dev": true, - "peerDependencies": { - "@carbon/icons-react": "^11", - "@emotion/react": "^11", - "@emotion/styled": "^11", - "@tablecheck/tablekit-core": "*", - "@tablecheck/tablekit-react": "*", - "react": ">=17", - "react-dom": ">=17", - "react-select": "^5" - } - }, "system/stories/node_modules/@types/glob": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz", diff --git a/system/core/scripts/updateFromFigma.mjs b/system/core/scripts/updateFromFigma.mjs index a6ed4dcdb..5a0f89afd 100644 --- a/system/core/scripts/updateFromFigma.mjs +++ b/system/core/scripts/updateFromFigma.mjs @@ -112,8 +112,23 @@ Object.keys(colorVars).forEach((groupKey) => { groupKey === 'light' ? textSecondary[1] : text[1] ]); } + if (groupKey === 'light') { + colorVars[groupKey].push([ + 'surface-raised-active-text', + 'var(--brand-primary)' + ]); + } + if (groupKey === 'dark') { + colorVars[groupKey].push([ + 'surface-raised-active-text', + 'var(--brand-primary-text)' + ]); + } colorVars[groupKey] = _.sortBy(colorVars[groupKey], '0').map( - ([name, value]) => [name, hexToRgba(value)] + ([name, value]) => [ + name, + value.startsWith('var(') ? value : hexToRgba(value) + ] ); }); diff --git a/system/core/src/themeVariables/theme.ts b/system/core/src/themeVariables/theme.ts index 5a8a6bec5..9032ae1b5 100644 --- a/system/core/src/themeVariables/theme.ts +++ b/system/core/src/themeVariables/theme.ts @@ -69,6 +69,7 @@ export const lightColors = css` --surface-low-hover-transparent: rgba(0, 0, 0, 0.03); --surface-raised: rgba(249, 249, 249, 1); --surface-raised-active: rgba(243, 242, 255, 1); + --surface-raised-active-text: var(--brand-primary); --surface-raised-hover: rgba(247, 247, 247, 1); --surface-raised-hover-transparent: rgba(0, 0, 0, 0.03); --surface-secondary: rgba(41, 41, 41, 1); @@ -139,6 +140,7 @@ export const lightColorsObject = { 'surface-low-hover-transparent': 'rgba(0, 0, 0, 0.03)', 'surface-raised': 'rgba(249, 249, 249, 1)', 'surface-raised-active': 'rgba(243, 242, 255, 1)', + 'surface-raised-active-text': 'var(--brand-primary)', 'surface-raised-hover': 'rgba(247, 247, 247, 1)', 'surface-raised-hover-transparent': 'rgba(0, 0, 0, 0.03)', 'surface-secondary': 'rgba(41, 41, 41, 1)', @@ -210,6 +212,7 @@ export const darkColors = css` --surface-low-hover-transparent: rgba(255, 255, 255, 0.05); --surface-raised: rgba(41, 41, 41, 1); --surface-raised-active: rgba(76, 68, 92, 1); + --surface-raised-active-text: var(--brand-primary-text); --surface-raised-hover: rgba(75, 75, 75, 1); --surface-raised-hover-transparent: rgba(255, 255, 255, 0.2); --surface-secondary: rgba(75, 75, 75, 1); @@ -280,6 +283,7 @@ export const darkColorsObject = { 'surface-low-hover-transparent': 'rgba(255, 255, 255, 0.05)', 'surface-raised': 'rgba(41, 41, 41, 1)', 'surface-raised-active': 'rgba(76, 68, 92, 1)', + 'surface-raised-active-text': 'var(--brand-primary-text)', 'surface-raised-hover': 'rgba(75, 75, 75, 1)', 'surface-raised-hover-transparent': 'rgba(255, 255, 255, 0.2)', 'surface-secondary': 'rgba(75, 75, 75, 1)', diff --git a/system/core/src/themeVariables/types.gen.ts b/system/core/src/themeVariables/types.gen.ts index 0e1b8000d..c88a3c3c0 100644 --- a/system/core/src/themeVariables/types.gen.ts +++ b/system/core/src/themeVariables/types.gen.ts @@ -53,6 +53,7 @@ export interface TableKitCSSProperties { '--surface-low-hover-transparent'?: string; '--surface-raised'?: string; '--surface-raised-active'?: string; + '--surface-raised-active-text'?: string; '--surface-raised-hover'?: string; '--surface-raised-hover-transparent'?: string; '--surface-secondary'?: string; diff --git a/system/stories/package.json b/system/stories/package.json index dcf08f44c..003550afe 100644 --- a/system/stories/package.json +++ b/system/stories/package.json @@ -27,12 +27,12 @@ "@storybook/theming": "7.0.0-rc.4", "@tablecheck/babel-preset": "1.1.0", "@tablecheck/locales": "1.1.1", - "@tablecheck/tablekit-core": "^2", - "@tablecheck/tablekit-css": "^2", - "@tablecheck/tablekit-react": "^2", - "@tablecheck/tablekit-react-css": "^2", - "@tablecheck/tablekit-react-datepicker": "^2", - "@tablecheck/tablekit-react-select": "^2", + "@tablecheck/tablekit-core": "^3", + "@tablecheck/tablekit-css": "^3", + "@tablecheck/tablekit-react": "^3", + "@tablecheck/tablekit-react-css": "^3", + "@tablecheck/tablekit-react-datepicker": "^3", + "@tablecheck/tablekit-react-select": "^3", "@vitejs/plugin-react": "3.1.0", "chokidar": "3.5.3", "concurrently": "8.2.2", diff --git a/system/stories/src/Theming.stories.tsx b/system/stories/src/Theming.stories.tsx index 33ad4fa0f..18258e1b4 100644 --- a/system/stories/src/Theming.stories.tsx +++ b/system/stories/src/Theming.stories.tsx @@ -33,53 +33,121 @@ const PaletteWrapper = styled.button` } `; -function PaletteColor({ color }: { color: string }) { +const ColorPreview = styled.span` + width: 60px; + height: 60px; + border-top-left-radius: var(--border-radius-small); + border-bottom-left-radius: var(--border-radius-small); + border-right: 1px solid var(--border); + display: inline-flex; + align-items: center; + justify-content: center; +`; + +const ColorPreviewLabel = styled.span` + color: var(--info-text); + font-weight: bold; + display: inline-block; + width: 80px; + text-align: end; + padding-inline-end: var(--spacing-l2); +`; + +function PaletteColor({ + color, + background +}: { + color: string; + background: string; +}) { + const backgroundVar = `var(--${background})`; + const colorVar = `var(--${color})`; return ( { e.preventDefault(); - navigator.clipboard.writeText(`var(--${color})`); + navigator.clipboard.writeText(colorVar); }} > - + > + Text + - var(--{color}) + {backgroundVar === colorVar ? null : ( + + Text: + + )} + {colorVar} + {backgroundVar === colorVar ? null : ( + <> +
+ + Background: {backgroundVar} + + + )} ); } +function getBackground(keys: string[], key: string) { + if (key === 'text-secondary') return 'surface-secondary'; + if (key === 'primary-text') return 'primary'; + if (key.startsWith('text')) return 'surface'; + if (!key.endsWith('-text')) return key; + const surface = keys.find((k) => k === key.replace('-text', '-surface')); + const base = keys.find((k) => k === key.replace('-text', '')); + return surface || base || key; +} + export const Palette: StoryFn = () => ( <>

Themed Colors

{Object.entries( - groupBy(Object.keys(lightColorsObject), (key) => key.split('-')[0]) + groupBy(Object.keys(lightColorsObject), (key) => { + const [, rootKey] = key.match(/^(text|toggle)-?/) ?? []; + if (rootKey) return rootKey; + return key.replace( + /-(active|focus|text|transparent|hover|surface|disabled|visited)/gi, + '' + ); + }) ).map(([groupKey, keys]) => ( -

{groupKey}

+

{groupKey.replace(/-/gi, ' ')}

{keys.map((key) => ( - + ))} ))}

Brand Colors

- {Object.keys(brandColorsObject).map((key) => ( - + {Object.keys(brandColorsObject).map((key, _, keys) => ( + ))}

Utility Colors

- {Object.keys(utilityColorsObject).map((key) => ( - + {Object.keys(utilityColorsObject).map((key, _, keys) => ( + ))} );