diff --git a/packages/plasma-new-hope/src/components/Link/Link.tokens.ts b/packages/plasma-new-hope/src/components/Link/Link.tokens.ts index 8263642588..2c1845c16d 100644 --- a/packages/plasma-new-hope/src/components/Link/Link.tokens.ts +++ b/packages/plasma-new-hope/src/components/Link/Link.tokens.ts @@ -7,6 +7,11 @@ export const tokens = { linkColorVisitedHover: '--plasma-link-color-visited-hover', linkColorVisitedActive: '--plasma-link-color-visited-active', linkFontFamily: '--plasma-link-font-family', + linkFontSize: '--plasma-link-font-size', + linkFontStyle: '--plasma-link-font-style', + linkFontWeight: '--plasma-link-font-weight', + linkLetterSpacing: '--plasma-link-letter-spacing', + linkLineHeight: '--plasma-link-line-height', linkDisabledOpacity: '--plasma-link-disabled-opacity', linkUnderlineBorder: '--plasma-link-underline-border', }; diff --git a/packages/plasma-new-hope/src/components/Link/Link.tsx b/packages/plasma-new-hope/src/components/Link/Link.tsx index 0006273025..0da00f9471 100644 --- a/packages/plasma-new-hope/src/components/Link/Link.tsx +++ b/packages/plasma-new-hope/src/components/Link/Link.tsx @@ -4,6 +4,7 @@ import { css } from '@linaria/core'; import type { RootProps } from '../../engines/types'; import { base as viewCSS } from './_view/base'; +import { base as sizeCSS } from './_size/base'; import { base as disabledCSS } from './_disabled/base'; import { base as focusedCSS } from './_focused/base'; import { LinkProps } from './Link.types'; @@ -49,6 +50,9 @@ export const linkConfig = { view: { css: viewCSS, }, + size: { + css: sizeCSS, + }, disabled: { css: disabledCSS, attrs: true, diff --git a/packages/plasma-new-hope/src/components/Link/_size/base.ts b/packages/plasma-new-hope/src/components/Link/_size/base.ts new file mode 100644 index 0000000000..973469e9c0 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Link/_size/base.ts @@ -0,0 +1,12 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../Link/Link.tokens'; + +export const base = css` + font-family: var(${tokens.linkFontFamily}); + font-size: var(${tokens.linkFontSize}); + font-style: var(${tokens.linkFontStyle}); + font-weight: var(${tokens.linkFontWeight}); + letter-spacing: var(${tokens.linkLetterSpacing}); + line-height: var(${tokens.linkLineHeight}); +`; diff --git a/packages/plasma-new-hope/src/components/Link/_size/tokens.json b/packages/plasma-new-hope/src/components/Link/_size/tokens.json new file mode 100644 index 0000000000..fe51488c70 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Link/_size/tokens.json @@ -0,0 +1 @@ +[] diff --git a/packages/plasma-new-hope/src/components/Link/_view/base.ts b/packages/plasma-new-hope/src/components/Link/_view/base.ts index 76a024fbfc..b1948b7932 100644 --- a/packages/plasma-new-hope/src/components/Link/_view/base.ts +++ b/packages/plasma-new-hope/src/components/Link/_view/base.ts @@ -11,8 +11,6 @@ const getColor = (cssVar: string) => ` `; export const base = css` - font-family: var(${tokens.linkFontFamily}); - color: var(${tokens.linkColor}); ::before { diff --git a/packages/plasma-new-hope/src/components/Link/_view/tokens.json b/packages/plasma-new-hope/src/components/Link/_view/tokens.json index 13afd60031..484467d329 100644 --- a/packages/plasma-new-hope/src/components/Link/_view/tokens.json +++ b/packages/plasma-new-hope/src/components/Link/_view/tokens.json @@ -1,5 +1,4 @@ [ - "--plasma-link-font-family", "--plasma-link-color", "--plasma-link-color-hover", "--plasma-link-color-active", diff --git a/packages/plasma-new-hope/src/components/Radiobox/Radiobox.styles.ts b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.styles.ts index 032ee414fe..661e05940a 100644 --- a/packages/plasma-new-hope/src/components/Radiobox/Radiobox.styles.ts +++ b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.styles.ts @@ -23,6 +23,7 @@ const mappingOverride = ` ${checkboxTokens.descriptionLineHeight}: var(${tokens.descriptionLineHeight}); ${checkboxTokens.fillColor}: var(${tokens.fillColor}); + ${checkboxTokens.labelColor}: var(${tokens.labelColor}); ${checkboxTokens.descriptionColor}: var(${tokens.descriptionColor}); ${checkboxTokens.triggerBorderWidth}: var(${tokens.triggerBorderWidth}); ${checkboxTokens.triggerBorderColor}: var(${tokens.triggerBorderColor}); diff --git a/packages/plasma-new-hope/src/components/Radiobox/Radiobox.tokens.ts b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.tokens.ts index 576ca85f70..b4fd150551 100644 --- a/packages/plasma-new-hope/src/components/Radiobox/Radiobox.tokens.ts +++ b/packages/plasma-new-hope/src/components/Radiobox/Radiobox.tokens.ts @@ -11,7 +11,7 @@ export const tokens = { labelFontWeight: '--plasma-radiobox-label-font-weight', labelLetterSpacing: '--plasma-radiobox-label-letter-spacing', labelLineHeight: '--plasma-radiobox-label-line-height', - descriptionMarginTop: '--plasma-checkbox-description-margin-top', + descriptionMarginTop: '--plasma-radiobox-description-margin-top', descriptionFontFamily: '--plasma-radiobox-description-font-family', descriptionFontSize: '--plasma-radiobox-description-font-size', descriptionFontStyle: '--plasma-radiobox-description-font-style', @@ -20,10 +20,11 @@ export const tokens = { descriptionLineHeight: '--plasma-radiobox-description-line-height', fillColor: '--plasma-radiobox-fill-color', + labelColor: '--plasma-radiobox-label-color', descriptionColor: '--plasma-radiobox-description-color', - triggerBorderWidth: '--plasma-checkbox-trigger-border-width', + triggerBorderWidth: '--plasma-radiobox-trigger-border-width', triggerBorderColor: '--plasma-radiobox-trigger-border-color', - triggerBorderCheckedColor: '--plasma-checkbox-trigger-border-checked-color', + triggerBorderCheckedColor: '--plasma-radiobox-trigger-border-checked-color', triggerBackgroundColor: '--plasma-radiobox-trigger-background-color', contentTopOffset: '--plasma-radiobox-content-top-offset', diff --git a/packages/plasma-new-hope/src/engines/emotion.tsx b/packages/plasma-new-hope/src/engines/emotion.tsx index 87611b3cee..5b8b6613c9 100644 --- a/packages/plasma-new-hope/src/engines/emotion.tsx +++ b/packages/plasma-new-hope/src/engines/emotion.tsx @@ -12,16 +12,18 @@ const Root = styled.div<{ staticVariants: (string | SerializedStyles)[]; dynamicVariants: (props: HTMLAnyAttributes) => any[]; intersectionStyles: PolymorphicClassName[]; + invariants?: string | SerializedStyles; }>` ${({ base }) => base}; ${({ staticVariants }) => staticVariants}; ${({ dynamicVariants }) => dynamicVariants}; ${({ intersectionStyles }) => intersectionStyles}; + ${({ invariants }) => invariants}; `; /* eslint-disable no-underscore-dangle */ export const _component = (componentConfig: ComponentConfig) => { - const { tag, base, intersections } = componentConfig; + const { tag, base, intersections, invariants } = componentConfig; const staticVariants = getStaticVariants(componentConfig); const dynamicVariants = getDynamicVariants(componentConfig); @@ -37,6 +39,7 @@ export const _component = (componentConfig: ComponentConfig) => { staticVariants={staticVariants} dynamicVariants={dynamicVariants} intersectionStyles={intersectionStyles} + invariants={invariants} {...props} ref={ref} /> diff --git a/packages/plasma-new-hope/src/engines/styled-components.tsx b/packages/plasma-new-hope/src/engines/styled-components.tsx index e9091dfcbf..aad21281b1 100644 --- a/packages/plasma-new-hope/src/engines/styled-components.tsx +++ b/packages/plasma-new-hope/src/engines/styled-components.tsx @@ -11,16 +11,18 @@ const Root = styled.div<{ staticVariants: string[]; dynamicVariants: (props: HTMLAnyAttributes) => any[]; intersectionStyles: string[]; + invariants: string; }>` ${({ base }) => base}; ${({ staticVariants }) => staticVariants}; ${({ dynamicVariants }) => dynamicVariants}; ${({ intersectionStyles }) => intersectionStyles}; + ${({ invariants }) => invariants}; `; /* eslint-disable no-underscore-dangle */ export const _component = (componentConfig: ComponentConfig) => { - const { tag, base, intersections } = componentConfig; + const { tag, base, intersections, invariants } = componentConfig; const staticVariants = getStaticVariants(componentConfig); const dynamicVariants = getDynamicVariants(componentConfig); @@ -34,6 +36,7 @@ export const _component = (componentConfig: ComponentConfig) => { staticVariants={staticVariants} dynamicVariants={dynamicVariants} intersectionStyles={intersectionStyles} + invariants={invariants} {...props} ref={ref} /> diff --git a/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts b/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts index 5860f657a8..ff5244da65 100644 --- a/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts @@ -5,12 +5,12 @@ import { tokens } from '../../../components/Link/Link.tokens'; export const config = { defaults: { view: 'accent', + size: 'm', focused: 'true', }, variations: { view: { default: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-primary); ${tokens.linkColorHover}: var(--text-primary-hover); ${tokens.linkColorActive}: var(--text-primary-active); @@ -20,7 +20,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, secondary: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-secondary); ${tokens.linkColorHover}: var(--text-secondary-hover); ${tokens.linkColorActive}: var(--text-secondary-active); @@ -30,7 +29,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, tertiary: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-tertiary); ${tokens.linkColorHover}: var(--text-tertiary-hover); ${tokens.linkColorActive}: var(--text-tertiary-active); @@ -40,7 +38,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, paragraph: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-paragraph); ${tokens.linkColorHover}: var(--text-paragraph-hover); ${tokens.linkColorActive}: var(--text-paragraph-active); @@ -50,7 +47,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, accent: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-accent); ${tokens.linkColorHover}: var(--text-accent-hover); ${tokens.linkColorActive}: var(--text-accent-active); @@ -60,7 +56,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, positive: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-positive); ${tokens.linkColorHover}: var(--text-positive-hover); ${tokens.linkColorActive}: var(--text-positive-active); @@ -70,7 +65,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, warning: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-warning); ${tokens.linkColorHover}: var(--text-warning-hover); ${tokens.linkColorActive}: var(--text-warning-active); @@ -80,7 +74,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, negative: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}: var(--text-negative); ${tokens.linkColorHover}: var(--text-negative-hover); ${tokens.linkColorActive}: var(--text-negative-active); @@ -90,7 +83,6 @@ export const config = { ${tokens.linkUnderlineBorder}: 0; `, clear: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); ${tokens.linkColor}:inherit; ${tokens.linkColorHover}: inherit; ${tokens.linkColorActive}: inherit; @@ -100,6 +92,144 @@ export const config = { ${tokens.linkUnderlineBorder}: 0.0625rem; `, }, + size: { + l: css` + ${tokens.linkFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-body-l-line-height); + `, + m: css` + ${tokens.linkFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-body-m-line-height); + `, + s: css` + ${tokens.linkFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-body-s-line-height); + `, + xs: css` + ${tokens.linkFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xxs: css` + ${tokens.linkFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-body-xxs-line-height); + `, + h1: css` + ${tokens.linkFontFamily}: var(--plasma-typo-h1-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-h1-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-h1-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-h1-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-h1-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-h1-line-height); + `, + h2: css` + ${tokens.linkFontFamily}: var(--plasma-typo-h2-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-h2-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-h2-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-h2-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-h2-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-h2-line-height); + `, + h3: css` + ${tokens.linkFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-h3-line-height); + `, + h4: css` + ${tokens.linkFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-h4-line-height); + `, + h5: css` + ${tokens.linkFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-h5-line-height); + `, + displayL: css` + ${tokens.linkFontFamily}: var(--plasma-typo-dspl-l-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-dspl-l-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-dspl-l-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-dspl-l-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-dspl-l-line-height); + `, + displayM: css` + ${tokens.linkFontFamily}: var(--plasma-typo-dspl-m-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-dspl-m-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-dspl-m-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-dspl-m-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-dspl-m-line-height); + `, + displayS: css` + ${tokens.linkFontFamily}: var(--plasma-typo-dspl-s-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-dspl-s-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-dspl-s-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-dspl-s-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-dspl-s-line-height); + `, + textL: css` + ${tokens.linkFontFamily}: var(--plasma-typo-text-l-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-text-l-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-text-l-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-text-l-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-text-l-line-height); + `, + textM: css` + ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-text-m-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-text-m-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-text-m-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-text-m-line-height); + `, + textS: css` + ${tokens.linkFontFamily}: var(--plasma-typo-text-s-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-text-s-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-text-s-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-text-s-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-text-s-line-height); + `, + textXs: css` + ${tokens.linkFontFamily}: var(--plasma-typo-text-xs-font-family); + ${tokens.linkFontSize}: var(--plasma-typo-text-xs-font-size); + ${tokens.linkFontStyle}: var(--plasma-typo-text-xs-font-style); + ${tokens.linkFontWeight}: var(--plasma-typo-text-xs-font-weight); + ${tokens.linkLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); + ${tokens.linkLineHeight}: var(--plasma-typo-text-xs-line-height); + `, + }, disabled: { true: css` ${tokens.linkDisabledOpacity}: 0.4; diff --git a/packages/plasma-new-hope/src/examples/components/Link/Link.stories.tsx b/packages/plasma-new-hope/src/examples/components/Link/Link.stories.tsx index 9d311084a7..5a9e84e2a5 100644 --- a/packages/plasma-new-hope/src/examples/components/Link/Link.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Link/Link.stories.tsx @@ -24,6 +24,7 @@ export const Default: StoryObj> = { href: 'https://google.com', children: 'Hello', view: 'accent', + size: 'm', disabled: false, focused: true, },