-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #69 from omnifed/68-docs-add-color-swatch-details-…
…page feat: add descriptions to semantic tokens
- Loading branch information
Showing
13 changed files
with
302 additions
and
107 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
docs/app/preset/colors/[name]/components/color-details.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import type { SemanticToken, Sentiment } from '@cerberus-design/panda-preset' | ||
| import { container, grid, gridItem, vstack } from '@/styled-system/patterns' | ||
| import { normalizeTokens, getTokenList } from '../../helpers/normalize' | ||
| import { css } from '@/styled-system/css' | ||
|
|
||
| const PREVIEW_SIZE = '15rem' | ||
|
|
||
| interface ColorDetailsProps { | ||
| token: string | ||
| } | ||
|
|
||
| export default function ColorDetails(props: ColorDetailsProps) { | ||
| const palette = props.token.split('-')[0] as Sentiment | ||
| const tokens = normalizeTokens(getTokenList(palette), palette) | ||
| const token = tokens[props.token as keyof typeof tokens] as SemanticToken | ||
| const semTokenValue = props.token.split('-').join('.') | ||
| const swatchColor = { | ||
| backgroundColor: token.value._cerberusTheme.base, | ||
| } | ||
|
|
||
| return ( | ||
| <div className={container()}> | ||
| <section | ||
| className={grid({ | ||
| columns: 12, | ||
| lg: { | ||
| mb: '8', | ||
| pb: '8', | ||
| }, | ||
| })} | ||
| > | ||
| <div | ||
| className={gridItem({ | ||
| gridColumnStart: 1, | ||
| gridColumnEnd: 13, | ||
| lg: { | ||
| gridColumnStart: 1, | ||
| gridColumnEnd: 5, | ||
| }, | ||
| })} | ||
| > | ||
| <div | ||
| className={vstack({ | ||
| border: '3px solid', | ||
| borderColor: 'neutral.border.initial', | ||
| justify: 'center', | ||
| bgColor: 'neutral.surface.200', | ||
| h: PREVIEW_SIZE, | ||
| rounded: '2xl', | ||
| })} | ||
| style={swatchColor} | ||
| /> | ||
| </div> | ||
|
|
||
| <div | ||
| className={gridItem({ | ||
| gridColumnStart: 1, | ||
| gridColumnEnd: 13, | ||
| lg: { | ||
| gridColumnStart: 5, | ||
| paddingInlineStart: '4', | ||
| }, | ||
| })} | ||
| > | ||
| <h2>{props.token}</h2> | ||
| <p>{token.description}</p> | ||
| <p> | ||
| Hex: <code>{token.value._cerberusTheme.base}</code> | ||
| </p> | ||
| <p> | ||
| Token: <code>{semTokenValue}</code> | ||
| </p> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import OnThisPage from '../../../components/OnThisPage' | ||
| import { PageMainContent, PageSections } from '../../../components/PageLayout' | ||
| import ColorDetails from './components/color-details' | ||
|
|
||
| interface ColorDetailsPageProps { | ||
| params: { | ||
| name: string | ||
| } | ||
| } | ||
|
|
||
| export default function ColorDetailsPage(props: ColorDetailsPageProps) { | ||
| return ( | ||
| <> | ||
| <PageMainContent> | ||
| <ColorDetails token={props.params.name} /> | ||
| </PageMainContent> | ||
|
|
||
| <PageSections> | ||
| <OnThisPage /> | ||
| </PageSections> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { | ||
| actionTokens, | ||
| dangerTokens, | ||
| infoTokens, | ||
| neutralTokens, | ||
| successTokens, | ||
| warningTokens, | ||
| type SemanticToken, | ||
| type Sentiment, | ||
| type SentimentConfig, | ||
| type ThemeSelectors, | ||
| } from '@cerberus-design/panda-preset' | ||
|
|
||
| export function getTokenList(palette: Sentiment): SentimentConfig[Sentiment] { | ||
| switch (palette) { | ||
| case 'neutral': | ||
| return neutralTokens.neutral | ||
| case 'action': | ||
| return actionTokens.action | ||
| case 'info': | ||
| return infoTokens.info | ||
| case 'success': | ||
| return successTokens.success | ||
| case 'warning': | ||
| return warningTokens.warning | ||
| case 'danger': | ||
| return dangerTokens.danger | ||
| default: | ||
| throw new Error('Invalid color palette') | ||
| } | ||
| } | ||
|
|
||
| export function normalizeTokens( | ||
| tokens: SentimentConfig[Sentiment], | ||
| palette: Sentiment, | ||
| ) { | ||
| const usage = Object.keys(tokens!) | ||
| return usage.reduce((acc, key) => { | ||
| const token = tokens![key as keyof typeof tokens] | ||
| const tokenKeys = Object.keys(token!) | ||
| const nestedTokenKeys = tokenKeys.filter( | ||
| (tokenKey) => typeof token![tokenKey as keyof typeof token] === 'object', | ||
| ) | ||
|
|
||
| const nestedTokens = normalizeNestedTokens({ | ||
| nestedTokenKeys, | ||
| token, | ||
| key, | ||
| palette, | ||
| }) | ||
|
|
||
| return { ...acc, ...nestedTokens } | ||
| }, {}) | ||
| } | ||
|
|
||
| interface NormalizeNestedTokensProps { | ||
| nestedTokenKeys: string[] | ||
| token: SemanticToken | ||
| key: string | ||
| palette: Sentiment | ||
| } | ||
|
|
||
| export function normalizeNestedTokens(data: NormalizeNestedTokensProps) { | ||
| const { token, key, palette } = data | ||
| return data.nestedTokenKeys.reduce((acc, tokenKey) => { | ||
| const nestedToken = token![tokenKey as keyof typeof token] as ThemeSelectors | ||
|
|
||
| if (nestedToken.hasOwnProperty('value')) | ||
| return { ...acc, [`${palette}-${key}-${tokenKey}`]: nestedToken } | ||
|
|
||
| const nestedTokenKeys = Object.keys(nestedToken) | ||
| const normalizedNestedToken = nestedTokenKeys.reduce( | ||
| (acc, nestedTokenKey) => { | ||
| const value = nestedToken[nestedTokenKey as keyof typeof nestedToken] | ||
| const tokenName = `${palette}-${key}-${tokenKey}-${nestedTokenKey}` | ||
| return { ...acc, [tokenName]: value } | ||
| }, | ||
| {}, | ||
| ) | ||
| return { ...acc, ...normalizedNestedToken } | ||
| }, {}) | ||
| } |
Oops, something went wrong.