Skip to content

Commit

Permalink
feat: update toke usage and story name
Browse files Browse the repository at this point in the history
  • Loading branch information
@yue4u
yue4u committed Dec 13, 2024
1 parent 84b6777 commit 2a9cd99
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 39 deletions.
3 changes: 3 additions & 0 deletions .storybook/theme-decorator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { useDarkMode } from 'storybook-dark-mode'
import { light, dark } from '@charcoal-ui/theme'
import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'

import '../packages/theme/src/css/_variables_dark.css'
import '../packages/theme/src/css/_variables_light.css'

const setter = themeSetter()

const Theme = ({ children }) => {
Expand Down
38 changes: 19 additions & 19 deletions ...cs/__snapshots__/token-v2.story.storyshot → ...ts__/token-v2-demo-styled.story.storyshot
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
exports[`Storybook Tests > theme/Token v2 demo > StyledComponents 1`] = `
.c0 {
-webkit-transition: 0.3s color ease-in-out;
transition: 0.3s color ease-in-out;
Expand All @@ -13,16 +13,16 @@ exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `

.c2 {
color: var(--charcoal-color-text-secondary-default);
font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
font-size: var(--charcoal-text-font-size-heading-xs);
line-height: var(--charcoal-text-line-height-heading-xs);
}

.c1 {
cursor: pointer;
font-weight: bold;
font-size: calc(var(--charcoal-text-font-size-body) * 1px);
line-height: calc(var(--charcoal-text-line-height-body) * 1px);
padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
font-size: var(--charcoal-text-font-size-body);
line-height: var(--charcoal-text-line-height-body);
padding: 13px var(--charcoal-space-layout-30);
border-top: 2px transparent;
color: var(--charcoal-color-text-tertiary-default);
}
Expand Down Expand Up @@ -65,15 +65,15 @@ exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: calc(var(--charcoal-space-layout-20) * 1px);
gap: var(--charcoal-space-layout-20);
}

.c5 {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: calc(var(--charcoal-radius-oval) * 1px);
border-radius: var(--charcoal-radius-oval);
cursor: pointer;
color: var(--charcoal-color-icon-default);
background-color: var(--charcoal-color-container-secondary-default);
Expand All @@ -91,8 +91,8 @@ exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `

.c6 {
color: var(--charcoal-color-text-default);
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
font-size: var(--charcoal-text-font-size-caption-m);
line-height: var(--charcoal-text-line-height-caption-m);
font-weight: bold;
}

Expand All @@ -104,8 +104,8 @@ exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
font-size: var(--charcoal-text-font-size-caption-m);
line-height: var(--charcoal-text-line-height-caption-m);
}

.c7:hover {
Expand All @@ -120,35 +120,35 @@ exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
grid-area: ArtworkList;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: calc(var(--charcoal-space-layout-20) * 1px);
gap: var(--charcoal-space-layout-20);
list-style: none;
padding: 0;
max-width: 424px;
}

.c9 {
display: grid;
gap: calc(var(--charcoal-space-layout-10) * 1px);
gap: var(--charcoal-space-layout-10);
}

.c10 {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: calc(var(--charcoal-radius-m) * 1px);
border-radius: var(--charcoal-radius-m);
}

.c11 {
color: var(--charcoal-color-text-default);
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
font-size: var(--charcoal-text-font-size-caption-m);
line-height: var(--charcoal-text-line-height-caption-m);
margin: 0;
}

.c12 {
margin: 0;
color: var(--charcoal-color-text-tertiary-default);
font-size: calc(var(--charcoal-text-font-size-caption-s) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-s) * 1px);
font-size: var(--charcoal-text-font-size-caption-s);
line-height: var(--charcoal-text-line-height-caption-s);
}

<div
Expand Down
40 changes: 20 additions & 20 deletions packages/react/docs/token-v2.story.tsx → ...react/docs/token-v2-demo-styled.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import tokens from '../../theme/dist/tokens/camel/css-variables.json'
import { Button, Icon } from '@charcoal-ui/react'

export default {
title: 'react/docs/Token-v2-demo',
title: 'theme/Token v2 demo',
component: Demo,
} as Meta<typeof Demo>

export const Styled: StoryObj<typeof Demo> = {
export const StyledComponents: StoryObj<typeof Demo> = {
render: Demo,
}

Expand Down Expand Up @@ -90,16 +90,16 @@ const Container = styled.section`

const H2 = styled.h2`
color: ${tokens.color.text.secondary.default};
font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
font-size: ${tokens.text.fontSize.heading.xs};
line-height: ${tokens.text.lineHeight.heading.xs};
`

const Tab = styled.a`
cursor: pointer;
font-weight: bold;
font-size: calc(${tokens.text.fontSize.body} * 1px);
line-height: calc(${tokens.text.lineHeight.body} * 1px);
padding: 13px calc(${tokens.space.layout[30]} * 1px);
font-size: ${tokens.text.fontSize.body};
line-height: ${tokens.text.lineHeight.body};
padding: 13px ${tokens.space.layout[30]};
border-top: 2px transparent;
color: ${tokens.color.text.tertiary.default};
Expand Down Expand Up @@ -135,15 +135,15 @@ const UserInfo = styled.div`
grid-auto-flow: column;
justify-content: left;
align-items: center;
gap: calc(${tokens.space.layout[20]} * 1px);
gap: ${tokens.space.layout[20]};
`

const User = styled.a`
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: calc(${tokens.radius.oval} * 1px);
border-radius: ${tokens.radius.oval};
cursor: pointer;
color: ${tokens.color.icon.default};
Expand All @@ -160,8 +160,8 @@ const User = styled.a`

const UserName = styled.span`
color: ${tokens.color.text.default};
font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
font-size: ${tokens.text.fontSize.caption.m};
line-height: ${tokens.text.lineHeight.caption.m};
font-weight: bold;
`

Expand All @@ -177,38 +177,38 @@ const ShowAll = styled.a`
}
text-align: right;
align-content: center;
font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
font-size: ${tokens.text.fontSize.caption.m};
line-height: ${tokens.text.lineHeight.caption.m};
`

const ArtworkList = styled.ul`
grid-area: ArtworkList;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(${tokens.space.layout[20]} * 1px);
gap: ${tokens.space.layout[20]};
list-style: none;
padding: 0;
max-width: 424px;
`

const Artwork = styled.article`
display: grid;
gap: calc(${tokens.space.layout[10]} * 1px);
gap: ${tokens.space.layout[10]};
`
const ArtworkThumbnail = styled.img`
width: 100%;
aspect-ratio: 3 / 2;
border-radius: calc(${tokens.radius.m} * 1px);
border-radius: ${tokens.radius.m};
`
const ArtworkTitle = styled.h3`
color: ${tokens.color.text.default};
font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
font-size: ${tokens.text.fontSize.caption.m};
line-height: ${tokens.text.lineHeight.caption.m};
margin: 0;
`
const ArtworkDescription = styled.p`
margin: 0;
color: ${tokens.color.text.tertiary.default};
font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
font-size: ${tokens.text.fontSize.caption.s};
line-height: ${tokens.text.lineHeight.caption.s};
`

0 comments on commit 2a9cd99

Please sign in to comment.