feat(plasma-new-hope): Add invariants support [DONT MERGE]

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',
 };

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,

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});
+`;

packages/plasma-new-hope/src/components/Link/_size/tokens.json

@@ -0,0 +1 @@
+[]

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 {

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",

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});

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',

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}
             />

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}
             />

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;

packages/plasma-new-hope/src/examples/components/Link/Link.stories.tsx

@@ -24,6 +24,7 @@ export const Default: StoryObj<ComponentProps<typeof Link>> = {
         href: 'https://google.com',
         children: 'Hello',
         view: 'accent',
+        size: 'm',
         disabled: false,
         focused: true,
     },