From 527da3752edc3ea40a6989b63e97c4edc5b80185 Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Wed, 19 Nov 2025 19:21:53 -0700 Subject: [PATCH] feat: Add typography shorthand --- .changeset/bold-pandas-smell.md | 9 + packages/parser/src/types.ts | 54 ++---- packages/plugin-css/src/build/index.ts | 24 +-- packages/plugin-css/src/index.ts | 5 +- packages/plugin-css/src/lib.ts | 4 +- .../__snapshots__/js.browser.test.ts.snap | 53 +++--- .../test/fixtures/color-scheme/want.css | 2 +- .../test/fixtures/ds-apple-hig/want.css | 33 ++-- .../test/fixtures/ds-figma-sds/want.css | 19 ++ .../test/fixtures/ds-github-primer/want.css | 53 +++--- .../test/fixtures/ds-ibm-carbon/want.css | 170 +++++++++--------- .../fixtures/ds-microsoft-fluent/want.css | 85 +++++---- .../test/fixtures/ds-radix/want.css | 136 +++++++------- .../fixtures/ds-salesforce-lightning/want.css | 2 +- .../plugin-css/test/fixtures/hex/want.css | 10 +- .../test/fixtures/type-border/want.css | 36 ++-- .../test/fixtures/type-color/want.css | 100 +++++------ .../test/fixtures/type-dimension/want.css | 4 +- .../test/fixtures/type-typography/want.css | 27 +-- .../test/fixtures/utility-css/want.css | 10 +- packages/plugin-css/test/lib.test.ts | 10 +- packages/plugin-sass/src/build.ts | 131 ++++++++++---- packages/plugin-sass/src/index.ts | 4 +- packages/plugin-sass/src/lib.ts | 6 + packages/plugin-sass/src/node.ts | 159 ++++++++++++++++ .../plugin-sass/test/fixtures/basic/want.scss | 96 ++++------ packages/plugin-token-listing/src/build.ts | 3 +- packages/token-tools/src/css/lib.ts | 26 ++- packages/token-tools/src/types.ts | 38 +++- packages/tokens/dist/index.css | 72 ++++---- ...{terrazzo.config.js => terrazzo.config.ts} | 2 +- 31 files changed, 858 insertions(+), 525 deletions(-) create mode 100644 .changeset/bold-pandas-smell.md create mode 100644 packages/plugin-sass/src/node.ts rename packages/tokens/{terrazzo.config.js => terrazzo.config.ts} (95%) diff --git a/.changeset/bold-pandas-smell.md b/.changeset/bold-pandas-smell.md new file mode 100644 index 000000000..cc16abd72 --- /dev/null +++ b/.changeset/bold-pandas-smell.md @@ -0,0 +1,9 @@ +--- +"@terrazzo/plugin-sass": minor +"@terrazzo/token-tools": minor +"@terrazzo/plugin-css": minor +"@terrazzo/cli": minor +"@terrazzo/parser": minor +--- + +feat: add typography shorthand, improve Sass plugin diff --git a/packages/parser/src/types.ts b/packages/parser/src/types.ts index c6b8462dd..acd70c79e 100644 --- a/packages/parser/src/types.ts +++ b/packages/parser/src/types.ts @@ -1,8 +1,23 @@ import type * as momoa from '@humanwhocodes/momoa'; -import type { Group, TokenNormalized, TokenNormalizedSet } from '@terrazzo/token-tools'; +import type { + Group, + TokenNormalized, + TokenNormalizedSet, + TokenTransformed, + TokenTransformedBase, +} from '@terrazzo/token-tools'; import type ytm from 'yaml-to-momoa'; import type Logger from './logger.js'; +// Export some types as a convenience, because they originally came from this package +export type { + Group, + TokenNormalized, + TokenNormalizedSet, + TokenTransformed, + TokenTransformedBase, +} from '@terrazzo/token-tools'; + export interface PluginHookContext { logger: Logger; } @@ -406,43 +421,6 @@ export interface ResolverSetNormalized { $defs: Record | undefined; } -interface TokenTransformedBase { - /** Original Token ID */ - id: string; - /** ID unique to this format. */ - localID?: string; - /** - * The mode of this value - * @default "." - */ - mode: string; - /** The original token. */ - token: TokenNormalized; - /** Arbitrary metadata set by plugins. */ - meta?: Record & { - /** - * Metadata for the token-listing plugin. Plugins can - * set this to be the name of a token as it appears in code, - * and the token-listing plugin will pick it up and use it. - */ - 'token-listing'?: { name: string | undefined }; - }; -} - -/** Transformed token with a single value. Note that this may be any type! */ -export interface TokenTransformedSingleValue extends TokenTransformedBase { - type: 'SINGLE_VALUE'; - value: string; -} - -/** Transformed token with multiple values. Note that this may be any type! */ -export interface TokenTransformedMultiValue extends TokenTransformedBase { - type: 'MULTI_VALUE'; - value: Record; -} - -export type TokenTransformed = TokenTransformedSingleValue | TokenTransformedMultiValue; - export interface TransformParams { /** ID of an existing format */ format: string; diff --git a/packages/plugin-css/src/build/index.ts b/packages/plugin-css/src/build/index.ts index 3c801d77d..a75e7635f 100644 --- a/packages/plugin-css/src/build/index.ts +++ b/packages/plugin-css/src/build/index.ts @@ -88,19 +88,20 @@ export default function buildFormat({ // multi-value token else if (token.type === 'MULTI_VALUE') { - const shorthand = generateShorthand({ $type: token.token.$type, localID }); - if (shorthand) { - rootRule.declarations[token.localID ?? token.token.id] = { - value: shorthand, - description: token.token.$description, - }; - } for (const [name, value] of Object.entries(token.value)) { rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = { value, description: token.token.$description, }; } + // Note: always place shorthand after other values + const shorthand = generateShorthand({ token: { ...token.token, $value: token.value as any }, localID }); + if (shorthand) { + rootRule.declarations[token.localID ?? token.token.id] = { + value: shorthand, + description: token.token.$description, + }; + } } } } @@ -166,13 +167,14 @@ export default function buildFormat({ // multi-value token else { - const shorthand = generateShorthand({ $type: token.token.$type, localID }); - if (shorthand) { - selectorRule.declarations[localID] = { value: shorthand, description: token.token.$description }; - } for (const [name, subvalue] of Object.entries(token.value)) { selectorRule.declarations[`${localID}-${name}`] = { value: subvalue, description: token.token.$description }; } + // Note: always generate shorthand after other declarations + const shorthand = generateShorthand({ token: { ...token.token, $value: token.value as any }, localID }); + if (shorthand) { + selectorRule.declarations[localID] = { value: shorthand, description: token.token.$description }; + } } // redeclare aliases so they have the correct scope diff --git a/packages/plugin-css/src/index.ts b/packages/plugin-css/src/index.ts index 999c219d9..c9030f100 100644 --- a/packages/plugin-css/src/index.ts +++ b/packages/plugin-css/src/index.ts @@ -71,10 +71,7 @@ export default function cssPlugin(options?: CSSPluginOptions): Plugin { let listingName: string | undefined = localID; // Composite tokens without a shorthand won't get generated in the output, so we don't list them. - if ( - typeof transformedValue === 'object' && - generateShorthand({ $type: token.$type, localID }) === undefined - ) { + if (typeof transformedValue === 'object' && generateShorthand({ token, localID }) === undefined) { listingName = undefined; } diff --git a/packages/plugin-css/src/lib.ts b/packages/plugin-css/src/lib.ts index e91e620be..d543c9307 100644 --- a/packages/plugin-css/src/lib.ts +++ b/packages/plugin-css/src/lib.ts @@ -125,9 +125,7 @@ function _printRule(rule: CSSRule): string { indent += ' '; } - const declarations = Object.entries(rule.declarations); - declarations.sort((a, b) => a[0].localeCompare(b[0], 'en-us', { numeric: true })); - for (const [k, d] of declarations) { + for (const [k, d] of Object.entries(rule.declarations)) { output.push(`${indent}${k}: ${d.value};${d.description ? ` /* ${d.description} */` : ''}`); } diff --git a/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap b/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap index b94890d66..e9b578a72 100644 --- a/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap +++ b/packages/plugin-css/test/__snapshots__/js.browser.test.ts.snap @@ -614,83 +614,94 @@ exports[`Browser > generates correct CSS 1`] = ` --text-body-line-height-large: 1.5; --text-body-line-height-medium: 1.4285; --text-body-line-height-small: 1.6666; - --text-body-shorthand-large-font-family: var(--font-stack-sans-serif); /* User-generated content, markdown rendering. */ - --text-body-shorthand-large-font-size: var(--text-body-size-large); /* User-generated content, markdown rendering. */ --text-body-shorthand-large-font-weight: var(--text-body-weight); /* User-generated content, markdown rendering. */ + --text-body-shorthand-large-font-size: var(--text-body-size-large); /* User-generated content, markdown rendering. */ --text-body-shorthand-large-letter-spacing: 0; /* User-generated content, markdown rendering. */ --text-body-shorthand-large-line-height: var(--text-body-line-height-large); /* User-generated content, markdown rendering. */ - --text-body-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default UI font. Most commonly used for body text. */ - --text-body-shorthand-medium-font-size: var(--text-body-size-medium); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-large-font-family: var(--font-stack-sans-serif); /* User-generated content, markdown rendering. */ + --text-body-shorthand-large: var(--text-body-shorthand-large-font-weight) var(--text-body-shorthand-large-font-size)/var(--text-body-shorthand-large-line-height) var(--text-body-shorthand-large-font-family); /* User-generated content, markdown rendering. */ --text-body-shorthand-medium-font-weight: var(--text-body-weight); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-medium-font-size: var(--text-body-size-medium); /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-medium-letter-spacing: 0; /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-medium-line-height: var(--text-body-line-height-medium); /* Default UI font. Most commonly used for body text. */ - --text-body-shorthand-small-font-family: var(--font-stack-sans-serif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ - --text-body-shorthand-small-font-size: var(--text-body-size-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-medium: var(--text-body-shorthand-medium-font-weight) var(--text-body-shorthand-medium-font-size)/var(--text-body-shorthand-medium-line-height) var(--text-body-shorthand-medium-font-family); /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-small-font-weight: var(--text-body-weight); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small-font-size: var(--text-body-size-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-shorthand-small-letter-spacing: 0; /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-shorthand-small-line-height: var(--text-body-line-height-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small-font-family: var(--font-stack-sans-serif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small: var(--text-body-shorthand-small-font-weight) var(--text-body-shorthand-small-font-size)/var(--text-body-shorthand-small-line-height) var(--text-body-shorthand-small-font-family); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-size-large: 16px; --text-body-size-medium: 14px; --text-body-size-small: 12px; --text-body-weight: var(--base-text-weight-normal); --text-caption-line-height: 1.3333; - --text-caption-shorthand-font-family: var(--font-stack-sans-serif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ - --text-caption-shorthand-font-size: var(--text-caption-size); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-font-weight: var(--text-caption-weight); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand-font-size: var(--text-caption-size); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-letter-spacing: 0; /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-line-height: var(--text-caption-line-height); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand-font-family: var(--font-stack-sans-serif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand: var(--text-caption-shorthand-font-weight) var(--text-caption-shorthand-font-size)/var(--text-caption-shorthand-line-height) var(--text-caption-shorthand-font-family); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-size: 12px; --text-caption-weight: var(--base-text-weight-normal); --text-code-block-line-height: 1.5385; - --text-code-block-shorthand-font-family: var(--font-stack-monospace); /* Default style for rendering code blocks. */ - --text-code-block-shorthand-font-size: var(--text-code-block-size); /* Default style for rendering code blocks. */ --text-code-block-shorthand-font-weight: var(--text-code-block-weight); /* Default style for rendering code blocks. */ + --text-code-block-shorthand-font-size: var(--text-code-block-size); /* Default style for rendering code blocks. */ --text-code-block-shorthand-letter-spacing: 0; /* Default style for rendering code blocks. */ --text-code-block-shorthand-line-height: var(--text-code-block-line-height); /* Default style for rendering code blocks. */ + --text-code-block-shorthand-font-family: var(--font-stack-monospace); /* Default style for rendering code blocks. */ + --text-code-block-shorthand: var(--text-code-block-shorthand-font-weight) var(--text-code-block-shorthand-font-size)/var(--text-code-block-shorthand-line-height) var(--text-code-block-shorthand-font-family); /* Default style for rendering code blocks. */ --text-code-block-size: 13px; --text-code-block-weight: var(--base-text-weight-normal); - --text-code-inline-shorthand-font-family: var(--font-stack-monospace); /* Inline code blocks using em units to inherit size from its parent. */ - --text-code-inline-shorthand-font-size: var(--text-code-inline-size); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-font-weight: var(--text-code-inline-weight); /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand-font-size: var(--text-code-inline-size); /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand-font-family: var(--font-stack-monospace); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-letter-spacing: 0; /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-line-height: 0; /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand: var(--text-code-inline-shorthand-font-weight) var(--text-code-inline-shorthand-font-size)/var(--text-code-inline-shorthand-line-height) var(--text-code-inline-shorthand-font-family); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-size: 0.9285em; --text-code-inline-weight: var(--base-text-weight-normal); --text-display-line-box-height: 56px; --text-display-line-height: 1.4; --text-display-shorthand-font-family: var(--font-stack-sans-serif); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ - --text-display-shorthand-font-size: var(--text-display-size); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-shorthand-font-weight: var(--text-display-weight); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ - --text-display-shorthand-letter-spacing: 0; /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand-font-size: var(--text-display-size); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-shorthand-line-height: var(--text-display-line-height); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand-letter-spacing: 0; /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand: var(--text-display-shorthand-font-weight) var(--text-display-shorthand-font-size)/var(--text-display-shorthand-line-height) var(--text-display-shorthand-font-family); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-size: 40px; --text-display-weight: var(--base-text-weight-medium); --text-subtitle-line-height: 1.6; - --text-subtitle-shorthand-font-family: var(--font-stack-sans-serif); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ - --text-subtitle-shorthand-font-size: var(--text-subtitle-size); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-font-weight: var(--text-subtitle-weight); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand-font-size: var(--text-subtitle-size); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-letter-spacing: 0; /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-line-height: var(--text-subtitle-line-height); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand-font-family: var(--font-stack-sans-serif); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand: var(--text-subtitle-shorthand-font-weight) var(--text-subtitle-shorthand-font-size)/var(--text-subtitle-shorthand-line-height) var(--text-subtitle-shorthand-font-family); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-size: 20px; --text-subtitle-weight: var(--base-text-weight-normal); --text-title-line-height-large: 1.5; --text-title-line-height-medium: 1.6; --text-title-line-height-small: 1.5; --text-title-shorthand-large-font-family: var(--font-stack-sans-serif); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ - --text-title-shorthand-large-font-size: var(--text-title-size-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-font-weight: var(--text-title-weight-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ + --text-title-shorthand-large-font-size: var(--text-title-size-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-letter-spacing: 0; /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-line-height: var(--text-title-line-height-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ - --text-title-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ - --text-title-shorthand-medium-font-size: var(--text-title-size-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-large: var(--text-title-shorthand-large-font-weight) var(--text-title-shorthand-large-font-size)/var(--text-title-shorthand-large-line-height) var(--text-title-shorthand-large-font-family); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-medium-font-weight: var(--text-title-weight-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-medium-font-size: var(--text-title-size-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-medium-letter-spacing: 0; /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-medium-line-height: var(--text-title-line-height-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ - --text-title-shorthand-small-font-family: var(--font-stack-sans-serif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ - --text-title-shorthand-small-font-size: var(--text-title-size-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-medium: var(--text-title-shorthand-medium-font-weight) var(--text-title-shorthand-medium-font-size)/var(--text-title-shorthand-medium-line-height) var(--text-title-shorthand-medium-font-family); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-small-font-weight: var(--text-title-weight-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small-font-size: var(--text-title-size-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-shorthand-small-letter-spacing: 0; /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-shorthand-small-line-height: var(--text-title-line-height-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small-font-family: var(--font-stack-sans-serif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small: var(--text-title-shorthand-small-font-weight) var(--text-title-shorthand-small-font-size)/var(--text-title-shorthand-small-line-height) var(--text-title-shorthand-small-font-family); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-size-large: 32px; --text-title-size-medium: 20px; --text-title-size-small: 16px; diff --git a/packages/plugin-css/test/fixtures/color-scheme/want.css b/packages/plugin-css/test/fixtures/color-scheme/want.css index d5c1f84c4..8f978f4fc 100644 --- a/packages/plugin-css/test/fixtures/color-scheme/want.css +++ b/packages/plugin-css/test/fixtures/color-scheme/want.css @@ -3,8 +3,8 @@ * ------------------------------------------- */ :root { - --foo: oklch(0.6334 0.2011 253.922); color-scheme: light dark; + --foo: oklch(0.6334 0.2011 253.922); } @media (color-gamut: p3) { diff --git a/packages/plugin-css/test/fixtures/ds-apple-hig/want.css b/packages/plugin-css/test/fixtures/ds-apple-hig/want.css index 799f89877..8f9de8d3c 100644 --- a/packages/plugin-css/test/fixtures/ds-apple-hig/want.css +++ b/packages/plugin-css/test/fixtures/ds-apple-hig/want.css @@ -29,58 +29,69 @@ --font-style-body-font-family: var(--font-family-sf-pro); --font-style-body-font-size: 17px; --font-style-body-font-weight: 400; - --font-style-body-letter-spacing: 0; --font-style-body-line-height: 22px; + --font-style-body-letter-spacing: 0; + --font-style-body: var(--font-style-body-font-weight) var(--font-style-body-font-size)/var(--font-style-body-line-height) var(--font-style-body-font-family); --font-style-callout-font-family: var(--font-family-sf-pro); --font-style-callout-font-size: 16px; --font-style-callout-font-weight: 400; - --font-style-callout-letter-spacing: 0; --font-style-callout-line-height: 21px; + --font-style-callout-letter-spacing: 0; + --font-style-callout: var(--font-style-callout-font-weight) var(--font-style-callout-font-size)/var(--font-style-callout-line-height) var(--font-style-callout-font-family); --font-style-caption1-font-family: var(--font-family-sf-pro); --font-style-caption1-font-size: 12px; --font-style-caption1-font-weight: 400; - --font-style-caption1-letter-spacing: 0; --font-style-caption1-line-height: 16px; + --font-style-caption1-letter-spacing: 0; + --font-style-caption1: var(--font-style-caption1-font-weight) var(--font-style-caption1-font-size)/var(--font-style-caption1-line-height) var(--font-style-caption1-font-family); --font-style-caption2-font-family: var(--font-family-sf-pro); --font-style-caption2-font-size: 11px; --font-style-caption2-font-weight: 400; - --font-style-caption2-letter-spacing: 0; --font-style-caption2-line-height: 13px; + --font-style-caption2-letter-spacing: 0; + --font-style-caption2: var(--font-style-caption2-font-weight) var(--font-style-caption2-font-size)/var(--font-style-caption2-line-height) var(--font-style-caption2-font-family); --font-style-footnote-font-family: var(--font-family-sf-pro); --font-style-footnote-font-size: 13px; --font-style-footnote-font-weight: 400; - --font-style-footnote-letter-spacing: 0; --font-style-footnote-line-height: 18px; + --font-style-footnote-letter-spacing: 0; + --font-style-footnote: var(--font-style-footnote-font-weight) var(--font-style-footnote-font-size)/var(--font-style-footnote-line-height) var(--font-style-footnote-font-family); --font-style-headline-font-family: var(--font-family-sf-pro); --font-style-headline-font-size: 17px; --font-style-headline-font-weight: 600; - --font-style-headline-letter-spacing: 0; --font-style-headline-line-height: 22px; + --font-style-headline-letter-spacing: 0; + --font-style-headline: var(--font-style-headline-font-weight) var(--font-style-headline-font-size)/var(--font-style-headline-line-height) var(--font-style-headline-font-family); --font-style-large-title-font-family: var(--font-family-sf-pro); --font-style-large-title-font-size: 34px; --font-style-large-title-font-weight: 400; - --font-style-large-title-letter-spacing: 0; --font-style-large-title-line-height: 41px; + --font-style-large-title-letter-spacing: 0; + --font-style-large-title: var(--font-style-large-title-font-weight) var(--font-style-large-title-font-size)/var(--font-style-large-title-line-height) var(--font-style-large-title-font-family); --font-style-subhead-font-family: var(--font-family-sf-pro); --font-style-subhead-font-size: 15px; --font-style-subhead-font-weight: 400; - --font-style-subhead-letter-spacing: 0; --font-style-subhead-line-height: 20px; + --font-style-subhead-letter-spacing: 0; + --font-style-subhead: var(--font-style-subhead-font-weight) var(--font-style-subhead-font-size)/var(--font-style-subhead-line-height) var(--font-style-subhead-font-family); --font-style-title1-font-family: var(--font-family-sf-pro); --font-style-title1-font-size: 28px; --font-style-title1-font-weight: 400; - --font-style-title1-letter-spacing: 0; --font-style-title1-line-height: 34px; + --font-style-title1-letter-spacing: 0; + --font-style-title1: var(--font-style-title1-font-weight) var(--font-style-title1-font-size)/var(--font-style-title1-line-height) var(--font-style-title1-font-family); --font-style-title2-font-family: var(--font-family-sf-pro); --font-style-title2-font-size: 22px; --font-style-title2-font-weight: 400; - --font-style-title2-letter-spacing: 0; --font-style-title2-line-height: 25px; + --font-style-title2-letter-spacing: 0; + --font-style-title2: var(--font-style-title2-font-weight) var(--font-style-title2-font-size)/var(--font-style-title2-line-height) var(--font-style-title2-font-family); --font-style-title3-font-family: var(--font-family-sf-pro); --font-style-title3-font-size: 20px; --font-style-title3-font-weight: 400; - --font-style-title3-letter-spacing: 0; --font-style-title3-line-height: 25px; + --font-style-title3-letter-spacing: 0; + --font-style-title3: var(--font-style-title3-font-weight) var(--font-style-title3-font-size)/var(--font-style-title3-line-height) var(--font-style-title3-font-family); } @media (prefers-color-scheme: light) { diff --git a/packages/plugin-css/test/fixtures/ds-figma-sds/want.css b/packages/plugin-css/test/fixtures/ds-figma-sds/want.css index b2a265da5..a11bca8df 100644 --- a/packages/plugin-css/test/fixtures/ds-figma-sds/want.css +++ b/packages/plugin-css/test/fixtures/ds-figma-sds/want.css @@ -265,31 +265,37 @@ --typography-body-large-font-weight: var(--typography-weight-regular); --typography-body-large-letter-spacing: 0; --typography-body-large-line-height: 1; + --typography-body-large: var(--typography-body-large-font-weight) var(--typography-body-large-font-size)/var(--typography-body-large-line-height) var(--typography-body-large-font-family); --typography-body-medium-font-family: var(--typography-family-sans); --typography-body-medium-font-size: var(--typography-scale-03); --typography-body-medium-font-weight: var(--typography-weight-regular); --typography-body-medium-letter-spacing: 0; --typography-body-medium-line-height: 1; + --typography-body-medium: var(--typography-body-medium-font-weight) var(--typography-body-medium-font-size)/var(--typography-body-medium-line-height) var(--typography-body-medium-font-family); --typography-body-small-font-family: var(--typography-family-sans); --typography-body-small-font-size: var(--typography-scale-02); --typography-body-small-font-weight: var(--typography-weight-regular); --typography-body-small-letter-spacing: 0; --typography-body-small-line-height: 1; + --typography-body-small: var(--typography-body-small-font-weight) var(--typography-body-small-font-size)/var(--typography-body-small-line-height) var(--typography-body-small-font-family); --typography-code-large-font-family: var(--typography-family-mono); --typography-code-large-font-size: var(--typography-scale-04); --typography-code-large-font-weight: var(--typography-weight-regular); --typography-code-large-letter-spacing: 0; --typography-code-large-line-height: 1; + --typography-code-large: var(--typography-code-large-font-weight) var(--typography-code-large-font-size)/var(--typography-code-large-line-height) var(--typography-code-large-font-family); --typography-code-medium-font-family: var(--typography-family-mono); --typography-code-medium-font-size: var(--typography-scale-03); --typography-code-medium-font-weight: var(--typography-weight-regular); --typography-code-medium-letter-spacing: 0; --typography-code-medium-line-height: 1; + --typography-code-medium: var(--typography-code-medium-font-weight) var(--typography-code-medium-font-size)/var(--typography-code-medium-line-height) var(--typography-code-medium-font-family); --typography-code-small-font-family: var(--typography-family-mono); --typography-code-small-font-size: var(--typography-scale-02); --typography-code-small-font-weight: var(--typography-weight-regular); --typography-code-small-letter-spacing: 0; --typography-code-small-line-height: 1; + --typography-code-small: var(--typography-code-small-font-weight) var(--typography-code-small-font-size)/var(--typography-code-small-line-height) var(--typography-code-small-font-family); --typography-family-mono: "roboto mono", monospace; --typography-family-sans: inter, sans-serif; --typography-family-serif: "noto serif", serif; @@ -298,16 +304,19 @@ --typography-heading-base-font-weight: var(--typography-weight-semibold); --typography-heading-base-letter-spacing: 0; --typography-heading-base-line-height: 1; + --typography-heading-base: var(--typography-heading-base-font-weight) var(--typography-heading-base-font-size)/var(--typography-heading-base-line-height) var(--typography-heading-base-font-family); --typography-heading-large-font-family: var(--typography-family-sans); --typography-heading-large-font-size: var(--typography-scale-06); --typography-heading-large-font-weight: var(--typography-weight-semibold); --typography-heading-large-letter-spacing: 0; --typography-heading-large-line-height: 1; + --typography-heading-large: var(--typography-heading-large-font-weight) var(--typography-heading-large-font-size)/var(--typography-heading-large-line-height) var(--typography-heading-large-font-family); --typography-heading-small-font-family: var(--typography-family-sans); --typography-heading-small-font-size: var(--typography-scale-04); --typography-heading-small-font-weight: var(--typography-weight-semibold); --typography-heading-small-letter-spacing: 0; --typography-heading-small-line-height: 1; + --typography-heading-small: var(--typography-heading-small-font-weight) var(--typography-heading-small-font-size)/var(--typography-heading-small-line-height) var(--typography-heading-small-font-family); --typography-scale-01: 0.75rem; --typography-scale-02: 0.875rem; --typography-scale-03: 1rem; @@ -323,51 +332,61 @@ --typography-subheading-base-font-weight: var(--typography-weight-regular); --typography-subheading-base-letter-spacing: 0; --typography-subheading-base-line-height: 1; + --typography-subheading-base: var(--typography-subheading-base-font-weight) var(--typography-subheading-base-font-size)/var(--typography-subheading-base-line-height) var(--typography-subheading-base-font-family); --typography-subheading-large-font-family: var(--typography-family-sans); --typography-subheading-large-font-size: var(--typography-scale-05); --typography-subheading-large-font-weight: var(--typography-weight-regular); --typography-subheading-large-letter-spacing: 0; --typography-subheading-large-line-height: 1; + --typography-subheading-large: var(--typography-subheading-large-font-weight) var(--typography-subheading-large-font-size)/var(--typography-subheading-large-line-height) var(--typography-subheading-large-font-family); --typography-subheading-small-font-family: var(--typography-family-sans); --typography-subheading-small-font-size: var(--typography-scale-03); --typography-subheading-small-font-weight: var(--typography-weight-regular); --typography-subheading-small-letter-spacing: 0; --typography-subheading-small-line-height: 1; + --typography-subheading-small: var(--typography-subheading-small-font-weight) var(--typography-subheading-small-font-size)/var(--typography-subheading-small-line-height) var(--typography-subheading-small-font-family); --typography-subtitle-base-font-family: var(--typography-family-sans); --typography-subtitle-base-font-size: var(--typography-scale-06); --typography-subtitle-base-font-weight: var(--typography-weight-regular); --typography-subtitle-base-letter-spacing: 0; --typography-subtitle-base-line-height: 1; + --typography-subtitle-base: var(--typography-subtitle-base-font-weight) var(--typography-subtitle-base-font-size)/var(--typography-subtitle-base-line-height) var(--typography-subtitle-base-font-family); --typography-subtitle-large-font-family: var(--typography-family-sans); --typography-subtitle-large-font-size: var(--typography-scale-07); --typography-subtitle-large-font-weight: var(--typography-weight-regular); --typography-subtitle-large-letter-spacing: 0; --typography-subtitle-large-line-height: 1; + --typography-subtitle-large: var(--typography-subtitle-large-font-weight) var(--typography-subtitle-large-font-size)/var(--typography-subtitle-large-line-height) var(--typography-subtitle-large-font-family); --typography-subtitle-small-font-family: var(--typography-family-sans); --typography-subtitle-small-font-size: var(--typography-scale-05); --typography-subtitle-small-font-weight: var(--typography-weight-regular); --typography-subtitle-small-letter-spacing: 0; --typography-subtitle-small-line-height: 1; + --typography-subtitle-small: var(--typography-subtitle-small-font-weight) var(--typography-subtitle-small-font-size)/var(--typography-subtitle-small-line-height) var(--typography-subtitle-small-font-family); --typography-title-hero-font-family: var(--typography-family-sans); --typography-title-hero-font-size: var(--typography-scale-10); --typography-title-hero-font-weight: var(--typography-weight-bold); --typography-title-hero-letter-spacing: 0; --typography-title-hero-line-height: 1; + --typography-title-hero: var(--typography-title-hero-font-weight) var(--typography-title-hero-font-size)/var(--typography-title-hero-line-height) var(--typography-title-hero-font-family); --typography-title-page-base-font-family: var(--typography-family-sans); --typography-title-page-base-font-size: var(--typography-scale-08); --typography-title-page-base-font-weight: var(--typography-weight-bold); --typography-title-page-base-letter-spacing: 0; --typography-title-page-base-line-height: 1; + --typography-title-page-base: var(--typography-title-page-base-font-weight) var(--typography-title-page-base-font-size)/var(--typography-title-page-base-line-height) var(--typography-title-page-base-font-family); --typography-title-page-large-font-family: var(--typography-family-sans); --typography-title-page-large-font-size: var(--typography-scale-09); --typography-title-page-large-font-weight: var(--typography-weight-bold); --typography-title-page-large-letter-spacing: 0; --typography-title-page-large-line-height: 1; + --typography-title-page-large: var(--typography-title-page-large-font-weight) var(--typography-title-page-large-font-size)/var(--typography-title-page-large-line-height) var(--typography-title-page-large-font-family); --typography-title-page-small-font-family: var(--typography-family-sans); --typography-title-page-small-font-size: var(--typography-scale-07); --typography-title-page-small-font-weight: var(--typography-weight-bold); --typography-title-page-small-letter-spacing: 0; --typography-title-page-small-line-height: 1; + --typography-title-page-small: var(--typography-title-page-small-font-weight) var(--typography-title-page-small-font-size)/var(--typography-title-page-small-line-height) var(--typography-title-page-small-font-family); --typography-weight-black: 900; --typography-weight-bold: 700; --typography-weight-extrabold: 800; diff --git a/packages/plugin-css/test/fixtures/ds-github-primer/want.css b/packages/plugin-css/test/fixtures/ds-github-primer/want.css index 53d0c7ed2..c78279867 100644 --- a/packages/plugin-css/test/fixtures/ds-github-primer/want.css +++ b/packages/plugin-css/test/fixtures/ds-github-primer/want.css @@ -611,83 +611,94 @@ --text-body-line-height-large: 1.5; --text-body-line-height-medium: 1.4285; --text-body-line-height-small: 1.6666; - --text-body-shorthand-large-font-family: var(--font-stack-sans-serif); /* User-generated content, markdown rendering. */ - --text-body-shorthand-large-font-size: var(--text-body-size-large); /* User-generated content, markdown rendering. */ --text-body-shorthand-large-font-weight: var(--text-body-weight); /* User-generated content, markdown rendering. */ + --text-body-shorthand-large-font-size: var(--text-body-size-large); /* User-generated content, markdown rendering. */ --text-body-shorthand-large-letter-spacing: 0; /* User-generated content, markdown rendering. */ --text-body-shorthand-large-line-height: var(--text-body-line-height-large); /* User-generated content, markdown rendering. */ - --text-body-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default UI font. Most commonly used for body text. */ - --text-body-shorthand-medium-font-size: var(--text-body-size-medium); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-large-font-family: var(--font-stack-sans-serif); /* User-generated content, markdown rendering. */ + --text-body-shorthand-large: var(--text-body-shorthand-large-font-weight) var(--text-body-shorthand-large-font-size)/var(--text-body-shorthand-large-line-height) var(--text-body-shorthand-large-font-family); /* User-generated content, markdown rendering. */ --text-body-shorthand-medium-font-weight: var(--text-body-weight); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-medium-font-size: var(--text-body-size-medium); /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-medium-letter-spacing: 0; /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-medium-line-height: var(--text-body-line-height-medium); /* Default UI font. Most commonly used for body text. */ - --text-body-shorthand-small-font-family: var(--font-stack-sans-serif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ - --text-body-shorthand-small-font-size: var(--text-body-size-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default UI font. Most commonly used for body text. */ + --text-body-shorthand-medium: var(--text-body-shorthand-medium-font-weight) var(--text-body-shorthand-medium-font-size)/var(--text-body-shorthand-medium-line-height) var(--text-body-shorthand-medium-font-family); /* Default UI font. Most commonly used for body text. */ --text-body-shorthand-small-font-weight: var(--text-body-weight); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small-font-size: var(--text-body-size-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-shorthand-small-letter-spacing: 0; /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-shorthand-small-line-height: var(--text-body-line-height-small); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small-font-family: var(--font-stack-sans-serif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ + --text-body-shorthand-small: var(--text-body-shorthand-small-font-weight) var(--text-body-shorthand-small-font-size)/var(--text-body-shorthand-small-line-height) var(--text-body-shorthand-small-font-family); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */ --text-body-size-large: 16px; --text-body-size-medium: 14px; --text-body-size-small: 12px; --text-body-weight: var(--base-text-weight-normal); --text-caption-line-height: 1.3333; - --text-caption-shorthand-font-family: var(--font-stack-sans-serif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ - --text-caption-shorthand-font-size: var(--text-caption-size); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-font-weight: var(--text-caption-weight); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand-font-size: var(--text-caption-size); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-letter-spacing: 0; /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-shorthand-line-height: var(--text-caption-line-height); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand-font-family: var(--font-stack-sans-serif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ + --text-caption-shorthand: var(--text-caption-shorthand-font-weight) var(--text-caption-shorthand-font-size)/var(--text-caption-shorthand-line-height) var(--text-caption-shorthand-font-family); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */ --text-caption-size: 12px; --text-caption-weight: var(--base-text-weight-normal); --text-code-block-line-height: 1.5385; - --text-code-block-shorthand-font-family: var(--font-stack-monospace); /* Default style for rendering code blocks. */ - --text-code-block-shorthand-font-size: var(--text-code-block-size); /* Default style for rendering code blocks. */ --text-code-block-shorthand-font-weight: var(--text-code-block-weight); /* Default style for rendering code blocks. */ + --text-code-block-shorthand-font-size: var(--text-code-block-size); /* Default style for rendering code blocks. */ --text-code-block-shorthand-letter-spacing: 0; /* Default style for rendering code blocks. */ --text-code-block-shorthand-line-height: var(--text-code-block-line-height); /* Default style for rendering code blocks. */ + --text-code-block-shorthand-font-family: var(--font-stack-monospace); /* Default style for rendering code blocks. */ + --text-code-block-shorthand: var(--text-code-block-shorthand-font-weight) var(--text-code-block-shorthand-font-size)/var(--text-code-block-shorthand-line-height) var(--text-code-block-shorthand-font-family); /* Default style for rendering code blocks. */ --text-code-block-size: 13px; --text-code-block-weight: var(--base-text-weight-normal); - --text-code-inline-shorthand-font-family: var(--font-stack-monospace); /* Inline code blocks using em units to inherit size from its parent. */ - --text-code-inline-shorthand-font-size: var(--text-code-inline-size); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-font-weight: var(--text-code-inline-weight); /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand-font-size: var(--text-code-inline-size); /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand-font-family: var(--font-stack-monospace); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-letter-spacing: 0; /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-shorthand-line-height: 0; /* Inline code blocks using em units to inherit size from its parent. */ + --text-code-inline-shorthand: var(--text-code-inline-shorthand-font-weight) var(--text-code-inline-shorthand-font-size)/var(--text-code-inline-shorthand-line-height) var(--text-code-inline-shorthand-font-family); /* Inline code blocks using em units to inherit size from its parent. */ --text-code-inline-size: 0.9285em; --text-code-inline-weight: var(--base-text-weight-normal); --text-display-line-box-height: 56px; --text-display-line-height: 1.4; --text-display-shorthand-font-family: var(--font-stack-sans-serif); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ - --text-display-shorthand-font-size: var(--text-display-size); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-shorthand-font-weight: var(--text-display-weight); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ - --text-display-shorthand-letter-spacing: 0; /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand-font-size: var(--text-display-size); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-shorthand-line-height: var(--text-display-line-height); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand-letter-spacing: 0; /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ + --text-display-shorthand: var(--text-display-shorthand-font-weight) var(--text-display-shorthand-font-size)/var(--text-display-shorthand-line-height) var(--text-display-shorthand-font-family); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */ --text-display-size: 40px; --text-display-weight: var(--base-text-weight-medium); --text-subtitle-line-height: 1.6; - --text-subtitle-shorthand-font-family: var(--font-stack-sans-serif); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ - --text-subtitle-shorthand-font-size: var(--text-subtitle-size); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-font-weight: var(--text-subtitle-weight); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand-font-size: var(--text-subtitle-size); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-letter-spacing: 0; /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-shorthand-line-height: var(--text-subtitle-line-height); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand-font-family: var(--font-stack-sans-serif); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ + --text-subtitle-shorthand: var(--text-subtitle-shorthand-font-weight) var(--text-subtitle-shorthand-font-size)/var(--text-subtitle-shorthand-line-height) var(--text-subtitle-shorthand-font-family); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */ --text-subtitle-size: 20px; --text-subtitle-weight: var(--base-text-weight-normal); --text-title-line-height-large: 1.5; --text-title-line-height-medium: 1.6; --text-title-line-height-small: 1.5; --text-title-shorthand-large-font-family: var(--font-stack-sans-serif); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ - --text-title-shorthand-large-font-size: var(--text-title-size-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-font-weight: var(--text-title-weight-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ + --text-title-shorthand-large-font-size: var(--text-title-size-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-letter-spacing: 0; /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-large-line-height: var(--text-title-line-height-large); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ - --text-title-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ - --text-title-shorthand-medium-font-size: var(--text-title-size-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-large: var(--text-title-shorthand-large-font-weight) var(--text-title-shorthand-large-font-size)/var(--text-title-shorthand-large-line-height) var(--text-title-shorthand-large-font-family); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */ --text-title-shorthand-medium-font-weight: var(--text-title-weight-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-medium-font-size: var(--text-title-size-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-medium-letter-spacing: 0; /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-medium-line-height: var(--text-title-line-height-medium); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ - --text-title-shorthand-small-font-family: var(--font-stack-sans-serif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ - --text-title-shorthand-small-font-size: var(--text-title-size-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-medium-font-family: var(--font-stack-sans-serif); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ + --text-title-shorthand-medium: var(--text-title-shorthand-medium-font-weight) var(--text-title-shorthand-medium-font-size)/var(--text-title-shorthand-medium-line-height) var(--text-title-shorthand-medium-font-family); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */ --text-title-shorthand-small-font-weight: var(--text-title-weight-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small-font-size: var(--text-title-size-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-shorthand-small-letter-spacing: 0; /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-shorthand-small-line-height: var(--text-title-line-height-small); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small-font-family: var(--font-stack-sans-serif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ + --text-title-shorthand-small: var(--text-title-shorthand-small-font-weight) var(--text-title-shorthand-small-font-size)/var(--text-title-shorthand-small-line-height) var(--text-title-shorthand-small-font-family); /* Uses the same size as body (large) with a heavier weight of semibold (600). */ --text-title-size-large: 32px; --text-title-size-medium: 20px; --text-title-size-small: 16px; diff --git a/packages/plugin-css/test/fixtures/ds-ibm-carbon/want.css b/packages/plugin-css/test/fixtures/ds-ibm-carbon/want.css index e275a007a..a27966d06 100644 --- a/packages/plugin-css/test/fixtures/ds-ibm-carbon/want.css +++ b/packages/plugin-css/test/fixtures/ds-ibm-carbon/want.css @@ -4,8 +4,8 @@ :root { --color-black: color(srgb 0 0 0); - --color-black-hover: color(srgb 0.12941176470588237 0.12941176470588237 0.12941176470588237); --color-black100: color(srgb 0 0 0); + --color-black-hover: color(srgb 0.12941176470588237 0.12941176470588237 0.12941176470588237); --color-blue10: color(srgb 0.9294117647058824 0.9607843137254902 1); --color-blue10-hover: color(srgb 0.8588235294117647 0.9215686274509803 1); --color-blue20: color(srgb 0.8156862745098039 0.8862745098039215 1); @@ -228,8 +228,8 @@ --color-warm-gray100: color(srgb 0.09019607843137255 0.0784313725490196 0.0784313725490196); --color-warm-gray100-hover: color(srgb 0.17254901960784313 0.14901960784313725 0.14901960784313725); --color-white: color(srgb 1 1 1); - --color-white-hover: color(srgb 0.9098039215686274 0.9098039215686274 0.9098039215686274); --color-white0: color(srgb 1 1 1); + --color-white-hover: color(srgb 0.9098039215686274 0.9098039215686274 0.9098039215686274); --color-yellow: color(srgb 0.9450980392156862 0.7607843137254902 0.10588235294117647); --color-yellow10: color(srgb 0.9882352941176471 0.9568627450980393 0.8392156862745098); --color-yellow10-hover: color(srgb 0.9725490196078431 0.9019607843137255 0.6274509803921569); @@ -264,14 +264,14 @@ --font-family-sans-condensed: "IBM Plex Sans Condensed", "Helvetica Neue", "Arial", sans-serif; --font-family-sans-hebrew: "IBM Plex Sans Hebrew", "Helvetica Hebrew", "Arial Hebrew", sans-serif; --font-family-serif: "IBM Plex Serif", "Georgia", "Times", serif; + --font-size-body01: 0.875rem; + --font-size-body02: 1rem; --font-size-body-compact01: 0.875rem; --font-size-body-compact02: 1rem; --font-size-body-long01: 0.875rem; --font-size-body-long02: 1rem; --font-size-body-short01: 0.875rem; --font-size-body-short02: 1rem; - --font-size-body01: 0.875rem; - --font-size-body02: 1rem; --font-size-caption01: 0.75rem; --font-size-caption02: 0.875rem; --font-size-code01: 0.75rem; @@ -298,8 +298,6 @@ --font-size-fluid-paragraph01: 1.5rem; --font-size-fluid-quotation01: 1.25rem; --font-size-fluid-quotation02: 2rem; - --font-size-heading-compact01: 0.875rem; - --font-size-heading-compact02: 1rem; --font-size-heading01: 0.875rem; --font-size-heading02: 1rem; --font-size-heading03: 1.25rem; @@ -307,6 +305,8 @@ --font-size-heading05: 2rem; --font-size-heading06: 2.625rem; --font-size-heading07: 3.375rem; + --font-size-heading-compact01: 0.875rem; + --font-size-heading-compact02: 1rem; --font-size-helper-text01: 0.75rem; --font-size-helper-text02: 0.875rem; --font-size-label01: 0.75rem; @@ -346,8 +346,8 @@ --icon-activity: url("/icon/activity.svg"); --icon-add: url("/icon/add.svg"); --icon-add-alt: url("/icon/add--alt.svg"); - --icon-add-comment: url("/icon/add-comment.svg"); --icon-add-filled: url("/icon/add--filled.svg"); + --icon-add-comment: url("/icon/add-comment.svg"); --icon-agriculture-analytics: url("/icon/agriculture-analytics.svg"); --icon-ai-results: url("/icon/ai-results.svg"); --icon-ai-results-high: url("/icon/ai-results--high.svg"); @@ -373,6 +373,12 @@ --icon-alarm: url("/icon/alarm.svg"); --icon-alarm-add: url("/icon/alarm--add.svg"); --icon-alarm-subtract: url("/icon/alarm--subtract.svg"); + --icon-align-horizontal-center: url("/icon/align--horizontal-center.svg"); + --icon-align-horizontal-left: url("/icon/align--horizontal-left.svg"); + --icon-align-horizontal-right: url("/icon/align--horizontal-right.svg"); + --icon-align-vertical-bottom: url("/icon/align--vertical-bottom.svg"); + --icon-align-vertical-center: url("/icon/align--vertical-center.svg"); + --icon-align-vertical-top: url("/icon/align--vertical-top.svg"); --icon-align-box-bottom-center: url("/icon/align-box--bottom-center.svg"); --icon-align-box-bottom-left: url("/icon/align-box--bottom-left.svg"); --icon-align-box-bottom-right: url("/icon/align-box--bottom-right.svg"); @@ -382,12 +388,6 @@ --icon-align-box-top-center: url("/icon/align-box--top-center.svg"); --icon-align-box-top-left: url("/icon/align-box--top-left.svg"); --icon-align-box-top-right: url("/icon/align-box--top-right.svg"); - --icon-align-horizontal-center: url("/icon/align--horizontal-center.svg"); - --icon-align-horizontal-left: url("/icon/align--horizontal-left.svg"); - --icon-align-horizontal-right: url("/icon/align--horizontal-right.svg"); - --icon-align-vertical-bottom: url("/icon/align--vertical-bottom.svg"); - --icon-align-vertical-center: url("/icon/align--vertical-center.svg"); - --icon-align-vertical-top: url("/icon/align--vertical-top.svg"); --icon-analytics: url("/icon/analytics.svg"); --icon-analytics-reference: url("/icon/analytics--reference.svg"); --icon-angle: url("/icon/angle.svg"); @@ -414,10 +414,10 @@ --icon-arrow-down-right: url("/icon/arrow--down-right.svg"); --icon-arrow-left: url("/icon/arrow--left.svg"); --icon-arrow-right: url("/icon/arrow--right.svg"); - --icon-arrow-shift-down: url("/icon/arrow-shift-down.svg"); --icon-arrow-up: url("/icon/arrow--up.svg"); --icon-arrow-up-left: url("/icon/arrow--up-left.svg"); --icon-arrow-up-right: url("/icon/arrow--up-right.svg"); + --icon-arrow-shift-down: url("/icon/arrow-shift-down.svg"); --icon-arrows: url("/icon/arrows.svg"); --icon-arrows-horizontal: url("/icon/arrows--horizontal.svg"); --icon-arrows-vertical: url("/icon/arrows--vertical.svg"); @@ -483,8 +483,8 @@ --icon-box-extra-large: url("/icon/box--extra-large.svg"); --icon-box-large: url("/icon/box--large.svg"); --icon-box-medium: url("/icon/box--medium.svg"); - --icon-box-plot: url("/icon/box-plot.svg"); --icon-box-small: url("/icon/box--small.svg"); + --icon-box-plot: url("/icon/box-plot.svg"); --icon-branch: url("/icon/branch.svg"); --icon-breaking-change: url("/icon/breaking-change.svg"); --icon-brightness-contrast: url("/icon/brightness-contrast.svg"); @@ -499,10 +499,6 @@ --icon-bullhorn: url("/icon/bullhorn.svg"); --icon-buoy: url("/icon/buoy.svg"); --icon-bus: url("/icon/bus.svg"); - --icon-c-u1: url("/icon/cU1.svg"); - --icon-c-u3: url("/icon/cU3.svg"); - --icon-c-y: url("/icon/cY.svg"); - --icon-c-z: url("/icon/cZ.svg"); --icon-cabin-care: url("/icon/cabin-care.svg"); --icon-cabin-care-alert: url("/icon/cabin-care--alert.svg"); --icon-cabin-care-alt: url("/icon/cabin-care--alt.svg"); @@ -615,10 +611,10 @@ --icon-chart-waterfall: url("/icon/chart--waterfall.svg"); --icon-chart-win-loss: url("/icon/chart--win-loss.svg"); --icon-chat: url("/icon/chat.svg"); - --icon-chat-bot: url("/icon/chat-bot.svg"); --icon-chat-launch: url("/icon/chat--launch.svg"); --icon-chat-off: url("/icon/chat--off.svg"); --icon-chat-operational: url("/icon/chat--operational.svg"); + --icon-chat-bot: url("/icon/chat-bot.svg"); --icon-checkbox: url("/icon/checkbox.svg"); --icon-checkbox-checked: url("/icon/checkbox--checked.svg"); --icon-checkbox-checked-filled: url("/icon/checkbox--checked--filled.svg"); @@ -649,18 +645,18 @@ --icon-choropleth-map: url("/icon/choropleth-map.svg"); --icon-cics-cmas: url("/icon/cics--cmas.svg"); --icon-cics-explorer: url("/icon/cics--explorer.svg"); + --icon-cics-system-group: url("/icon/cics--system-group.svg"); + --icon-cics-wui-region: url("/icon/cics--wui-region.svg"); --icon-cics-region: url("/icon/cics-region.svg"); --icon-cics-region-routing: url("/icon/cics-region--routing.svg"); --icon-cics-region-target: url("/icon/cics-region--target.svg"); - --icon-cics-system-group: url("/icon/cics--system-group.svg"); - --icon-cics-wui-region: url("/icon/cics--wui-region.svg"); --icon-cicsplex: url("/icon/cicsplex.svg"); + --icon-circle-filled: url("/icon/circle--filled.svg"); + --icon-circle-solid: url("/icon/circle--solid.svg"); --icon-circle-dash: url("/icon/circle-dash.svg"); --icon-circle-fill: url("/icon/circle-fill.svg"); - --icon-circle-filled: url("/icon/circle--filled.svg"); --icon-circle-measurement: url("/icon/circle-measurement.svg"); --icon-circle-packing: url("/icon/circle-packing.svg"); - --icon-circle-solid: url("/icon/circle--solid.svg"); --icon-circle-stroke: url("/icon/circle-stroke.svg"); --icon-circuit-composer: url("/icon/circuit-composer.svg"); --icon-classification: url("/icon/classification.svg"); @@ -674,27 +670,27 @@ --icon-closed-caption-filled: url("/icon/closed-caption--filled.svg"); --icon-cloud: url("/icon/cloud.svg"); --icon-cloud-alerting: url("/icon/cloud--alerting.svg"); - --icon-cloud-app: url("/icon/cloud-app.svg"); --icon-cloud-auditing: url("/icon/cloud--auditing.svg"); - --icon-cloud-ceiling: url("/icon/cloud-ceiling.svg"); --icon-cloud-data-ops: url("/icon/cloud--data-ops.svg"); --icon-cloud-download: url("/icon/cloud--download.svg"); - --icon-cloud-foundry-1: url("/icon/cloud-foundry--1.svg"); - --icon-cloud-foundry-2: url("/icon/cloud-foundry--2.svg"); --icon-cloud-lightning: url("/icon/cloud--lightning.svg"); --icon-cloud-logging: url("/icon/cloud--logging.svg"); --icon-cloud-monitoring: url("/icon/cloud--monitoring.svg"); --icon-cloud-offline: url("/icon/cloud--offline.svg"); --icon-cloud-rain: url("/icon/cloud--rain.svg"); + --icon-cloud-service-management: url("/icon/cloud--service-management.svg"); + --icon-cloud-snow: url("/icon/cloud--snow.svg"); + --icon-cloud-upload: url("/icon/cloud--upload.svg"); + --icon-cloud-app: url("/icon/cloud-app.svg"); + --icon-cloud-ceiling: url("/icon/cloud-ceiling.svg"); + --icon-cloud-foundry-1: url("/icon/cloud-foundry--1.svg"); + --icon-cloud-foundry-2: url("/icon/cloud-foundry--2.svg"); --icon-cloud-registry: url("/icon/cloud-registry.svg"); --icon-cloud-satellite: url("/icon/cloud-satellite.svg"); --icon-cloud-satellite-config: url("/icon/cloud-satellite--config.svg"); --icon-cloud-satellite-link: url("/icon/cloud-satellite--link.svg"); --icon-cloud-satellite-services: url("/icon/cloud-satellite--services.svg"); - --icon-cloud-service-management: url("/icon/cloud--service-management.svg"); --icon-cloud-services: url("/icon/cloud-services.svg"); - --icon-cloud-snow: url("/icon/cloud--snow.svg"); - --icon-cloud-upload: url("/icon/cloud--upload.svg"); --icon-cloudy: url("/icon/cloudy.svg"); --icon-cobb-angle: url("/icon/cobb-angle.svg"); --icon-code: url("/icon/code.svg"); @@ -709,8 +705,8 @@ --icon-color-switch: url("/icon/color-switch.svg"); --icon-column: url("/icon/column.svg"); --icon-column-delete: url("/icon/column--delete.svg"); - --icon-column-dependency: url("/icon/column-dependency.svg"); --icon-column-insert: url("/icon/column--insert.svg"); + --icon-column-dependency: url("/icon/column-dependency.svg"); --icon-commit: url("/icon/commit.svg"); --icon-communication-unified: url("/icon/communication--unified.svg"); --icon-compare: url("/icon/compare.svg"); @@ -725,9 +721,9 @@ --icon-connect-target: url("/icon/connect--target.svg"); --icon-connection-receive: url("/icon/connection--receive.svg"); --icon-connection-send: url("/icon/connection--send.svg"); + --icon-connection-two-way: url("/icon/connection--two-way.svg"); --icon-connection-signal: url("/icon/connection-signal.svg"); --icon-connection-signal-off: url("/icon/connection-signal--off.svg"); - --icon-connection-two-way: url("/icon/connection--two-way.svg"); --icon-construction: url("/icon/construction.svg"); --icon-container-registry: url("/icon/container-registry.svg"); --icon-container-services: url("/icon/container-services.svg"); @@ -764,6 +760,8 @@ --icon-crowd-report: url("/icon/crowd-report.svg"); --icon-crowd-report-filled: url("/icon/crowd-report--filled.svg"); --icon-csv: url("/icon/CSV.svg"); + --icon-c-u1: url("/icon/cU1.svg"); + --icon-c-u3: url("/icon/cU3.svg"); --icon-cube: url("/icon/cube.svg"); --icon-cube-view: url("/icon/cube-view.svg"); --icon-currency: url("/icon/currency.svg"); @@ -782,38 +780,40 @@ --icon-cut: url("/icon/cut.svg"); --icon-cut-in-half: url("/icon/cut-in-half.svg"); --icon-cut-out: url("/icon/cut-out.svg"); + --icon-c-y: url("/icon/cY.svg"); --icon-cyclist: url("/icon/cyclist.svg"); + --icon-c-z: url("/icon/cZ.svg"); --icon-dashboard: url("/icon/dashboard.svg"); --icon-dashboard-reference: url("/icon/dashboard--reference.svg"); --icon-data-1: url("/icon/data--1.svg"); --icon-data-2: url("/icon/data--2.svg"); - --icon-data-accessor: url("/icon/data-accessor.svg"); - --icon-data-backup: url("/icon/data-backup.svg"); --icon-data-base: url("/icon/data--base.svg"); --icon-data-base-alt: url("/icon/data--base--alt.svg"); - --icon-data-bin: url("/icon/data-bin.svg"); - --icon-data-blob: url("/icon/data-blob.svg"); --icon-data-center: url("/icon/data--center.svg"); --icon-data-check: url("/icon/data--check.svg"); + --icon-data-connected: url("/icon/data--connected.svg"); + --icon-data-error: url("/icon/data--error.svg"); + --icon-data-format: url("/icon/data--format.svg"); + --icon-data-reference: url("/icon/data--reference.svg"); + --icon-data-set: url("/icon/data--set.svg"); + --icon-data-structured: url("/icon/data--structured.svg"); + --icon-data-unstructured: url("/icon/data--unstructured.svg"); + --icon-data-view: url("/icon/data--view.svg"); + --icon-data-view-alt: url("/icon/data--view--alt.svg"); + --icon-data-accessor: url("/icon/data-accessor.svg"); + --icon-data-backup: url("/icon/data-backup.svg"); + --icon-data-bin: url("/icon/data-bin.svg"); + --icon-data-blob: url("/icon/data-blob.svg"); --icon-data-class: url("/icon/data-class.svg"); --icon-data-collection: url("/icon/data-collection.svg"); - --icon-data-connected: url("/icon/data--connected.svg"); --icon-data-definition: url("/icon/data-definition.svg"); --icon-data-diode: url("/icon/data-diode.svg"); - --icon-data-error: url("/icon/data--error.svg"); - --icon-data-format: url("/icon/data--format.svg"); --icon-data-player: url("/icon/data-player.svg"); - --icon-data-reference: url("/icon/data--reference.svg"); --icon-data-refinery: url("/icon/data-refinery.svg"); --icon-data-refinery-reference: url("/icon/data-refinery--reference.svg"); - --icon-data-set: url("/icon/data--set.svg"); --icon-data-share: url("/icon/data-share.svg"); - --icon-data-structured: url("/icon/data--structured.svg"); --icon-data-table: url("/icon/data-table.svg"); --icon-data-table-reference: url("/icon/data-table--reference.svg"); - --icon-data-unstructured: url("/icon/data--unstructured.svg"); - --icon-data-view: url("/icon/data--view.svg"); - --icon-data-view-alt: url("/icon/data--view--alt.svg"); --icon-data-vis-1: url("/icon/data-vis--1.svg"); --icon-data-vis-2: url("/icon/data-vis--2.svg"); --icon-data-vis-3: url("/icon/data-vis--3.svg"); @@ -914,7 +914,6 @@ --icon-document-preliminary: url("/icon/document--preliminary.svg"); --icon-document-protected: url("/icon/document--protected.svg"); --icon-document-security: url("/icon/document--security.svg"); - --icon-document-sentiment: url("/icon/document-sentiment.svg"); --icon-document-signed: url("/icon/document--signed.svg"); --icon-document-sketch: url("/icon/document--sketch.svg"); --icon-document-subtract: url("/icon/document--subtract.svg"); @@ -926,6 +925,7 @@ --icon-document-view: url("/icon/document--view.svg"); --icon-document-word-processor: url("/icon/document--word-processor.svg"); --icon-document-word-processor-reference: url("/icon/document--word-processor--reference.svg"); + --icon-document-sentiment: url("/icon/document-sentiment.svg"); --icon-dog-walker: url("/icon/dog-walker.svg"); --icon-dot-mark: url("/icon/dot-mark.svg"); --icon-double-integer: url("/icon/double-integer.svg"); @@ -967,8 +967,8 @@ --icon-edge-node-alt: url("/icon/edge-node--alt.svg"); --icon-edge-service: url("/icon/edge-service.svg"); --icon-edit: url("/icon/edit.svg"); - --icon-edit-filter: url("/icon/edit-filter.svg"); --icon-edit-off: url("/icon/edit--off.svg"); + --icon-edit-filter: url("/icon/edit-filter.svg"); --icon-edt-loop: url("/icon/edt-loop.svg"); --icon-education: url("/icon/education.svg"); --icon-email: url("/icon/email.svg"); @@ -1049,11 +1049,11 @@ --icon-flow: url("/icon/flow.svg"); --icon-flow-connection: url("/icon/flow--connection.svg"); --icon-flow-data: url("/icon/flow--data.svg"); - --icon-flow-logs-vpc: url("/icon/flow-logs-vpc.svg"); --icon-flow-modeler: url("/icon/flow--modeler.svg"); --icon-flow-modeler-reference: url("/icon/flow--modeler--reference.svg"); --icon-flow-stream: url("/icon/flow--stream.svg"); --icon-flow-stream-reference: url("/icon/flow--stream--reference.svg"); + --icon-flow-logs-vpc: url("/icon/flow-logs-vpc.svg"); --icon-fog: url("/icon/fog.svg"); --icon-folder: url("/icon/folder.svg"); --icon-folder-add: url("/icon/folder--add.svg"); @@ -1112,12 +1112,12 @@ --icon-group: url("/icon/group.svg"); --icon-group-access: url("/icon/group--access.svg"); --icon-group-account: url("/icon/group--account.svg"); - --icon-group-objects: url("/icon/group-objects.svg"); - --icon-group-objects-new: url("/icon/group-objects--new.svg"); - --icon-group-objects-save: url("/icon/group-objects--save.svg"); --icon-group-presentation: url("/icon/group--presentation.svg"); --icon-group-resource: url("/icon/group--resource.svg"); --icon-group-security: url("/icon/group--security.svg"); + --icon-group-objects: url("/icon/group-objects.svg"); + --icon-group-objects-new: url("/icon/group-objects--new.svg"); + --icon-group-objects-save: url("/icon/group-objects--save.svg"); --icon-growth: url("/icon/growth.svg"); --icon-gui: url("/icon/gui.svg"); --icon-gui-management: url("/icon/gui--management.svg"); @@ -1142,8 +1142,8 @@ --icon-heat-map-stocks: url("/icon/heat-map--stocks.svg"); --icon-helicopter: url("/icon/helicopter.svg"); --icon-help: url("/icon/help.svg"); - --icon-help-desk: url("/icon/help-desk.svg"); --icon-help-filled: url("/icon/help--filled.svg"); + --icon-help-desk: url("/icon/help-desk.svg"); --icon-hinton-plot: url("/icon/hinton-plot.svg"); --icon-hl7-attributes: url("/icon/HL7-attributes.svg"); --icon-hole-filling: url("/icon/hole-filling.svg"); @@ -1162,11 +1162,14 @@ --icon-hurricane: url("/icon/hurricane.svg"); --icon-hybrid-networking: url("/icon/hybrid-networking.svg"); --icon-hybrid-networking-alt: url("/icon/hybrid-networking--alt.svg"); - --icon-i-ca-2-d: url("/icon/iCA-2D.svg"); - --icon-i-d: url("/icon/iD.svg"); + --icon-ibm-data-replication: url("/icon/ibm--data-replication.svg"); + --icon-ibm-match-360: url("/icon/ibm--match-360.svg"); --icon-ibm-cloud: url("/icon/ibm-cloud.svg"); --icon-ibm-cloud-dedicated-host: url("/icon/ibm-cloud--dedicated-host.svg"); --icon-ibm-cloud-internet-services: url("/icon/ibm-cloud--internet-services.svg"); + --icon-ibm-cloud-subnets: url("/icon/ibm-cloud--subnets.svg"); + --icon-ibm-cloud-transit-gateway: url("/icon/ibm-cloud--transit-gateway.svg"); + --icon-ibm-cloud-vpc-endpoints: url("/icon/ibm-cloud--vpc-endpoints.svg"); --icon-ibm-cloud-pak-applications: url("/icon/ibm-cloud-pak--applications.svg"); --icon-ibm-cloud-pak-data: url("/icon/ibm-cloud-pak--data.svg"); --icon-ibm-cloud-pak-integration: url("/icon/ibm-cloud-pak--integration.svg"); @@ -1175,15 +1178,12 @@ --icon-ibm-cloud-pak-security: url("/icon/ibm-cloud-pak--security.svg"); --icon-ibm-cloud-pak-system: url("/icon/ibm-cloud-pak--system.svg"); --icon-ibm-cloud-pak-watson-aiops: url("/icon/ibm-cloud-pak--watson-aiops.svg"); - --icon-ibm-cloud-subnets: url("/icon/ibm-cloud--subnets.svg"); - --icon-ibm-cloud-transit-gateway: url("/icon/ibm-cloud--transit-gateway.svg"); - --icon-ibm-cloud-vpc-endpoints: url("/icon/ibm-cloud--vpc-endpoints.svg"); - --icon-ibm-data-replication: url("/icon/ibm--data-replication.svg"); - --icon-ibm-match-360: url("/icon/ibm--match-360.svg"); --icon-ibm-security: url("/icon/ibm-security.svg"); --icon-ibm-security-services: url("/icon/ibm-security--services.svg"); + --icon-i-ca-2-d: url("/icon/iCA-2D.svg"); --icon-ice-accretion: url("/icon/ice--accretion.svg"); --icon-ice-vision: url("/icon/ice--vision.svg"); + --icon-i-d: url("/icon/iD.svg"); --icon-id-management: url("/icon/id-management.svg"); --icon-idea: url("/icon/idea.svg"); --icon-identification: url("/icon/identification.svg"); @@ -1374,17 +1374,17 @@ --icon-manage-protection: url("/icon/manage-protection.svg"); --icon-managed-solutions: url("/icon/managed-solutions.svg"); --icon-map: url("/icon/map.svg"); - --icon-map-boundary: url("/icon/map-boundary.svg"); - --icon-map-boundary-vegetation: url("/icon/map-boundary--vegetation.svg"); --icon-map-center: url("/icon/map--center.svg"); --icon-map-identify: url("/icon/map--identify.svg"); + --icon-map-boundary: url("/icon/map-boundary.svg"); + --icon-map-boundary-vegetation: url("/icon/map-boundary--vegetation.svg"); --icon-marine-warning: url("/icon/marine-warning.svg"); --icon-math-curve: url("/icon/math-curve.svg"); --icon-matrix: url("/icon/matrix.svg"); --icon-maximize: url("/icon/maximize.svg"); - --icon-media-cast: url("/icon/media-cast.svg"); --icon-media-library: url("/icon/media--library.svg"); --icon-media-library-filled: url("/icon/media--library--filled.svg"); + --icon-media-cast: url("/icon/media-cast.svg"); --icon-medication: url("/icon/medication.svg"); --icon-medication-alert: url("/icon/medication--alert.svg"); --icon-medication-reminder: url("/icon/medication--reminder.svg"); @@ -1415,9 +1415,9 @@ --icon-mobility-services: url("/icon/mobility--services.svg"); --icon-model: url("/icon/model.svg"); --icon-model-alt: url("/icon/model--alt.svg"); + --icon-model-reference: url("/icon/model--reference.svg"); --icon-model-builder: url("/icon/model-builder.svg"); --icon-model-builder-reference: url("/icon/model-builder--reference.svg"); - --icon-model-reference: url("/icon/model--reference.svg"); --icon-money: url("/icon/money.svg"); --icon-monster: url("/icon/monster.svg"); --icon-monument: url("/icon/monument.svg"); @@ -1529,9 +1529,9 @@ --icon-overflow-menu-vertical: url("/icon/overflow-menu--vertical.svg"); --icon-overlay: url("/icon/overlay.svg"); --icon-package: url("/icon/package.svg"); - --icon-page-break: url("/icon/page-break.svg"); --icon-page-first: url("/icon/page--first.svg"); --icon-page-last: url("/icon/page--last.svg"); + --icon-page-break: url("/icon/page-break.svg"); --icon-page-number: url("/icon/page-number.svg"); --icon-page-scroll: url("/icon/page-scroll.svg"); --icon-paint-brush: url("/icon/paint-brush.svg"); @@ -1552,9 +1552,9 @@ --icon-paste: url("/icon/paste.svg"); --icon-pause: url("/icon/pause.svg"); --icon-pause-filled: url("/icon/pause--filled.svg"); - --icon-pause-future: url("/icon/pause-future.svg"); --icon-pause-outline: url("/icon/pause--outline.svg"); --icon-pause-outline-filled: url("/icon/pause--outline--filled.svg"); + --icon-pause-future: url("/icon/pause-future.svg"); --icon-pause-past: url("/icon/pause-past.svg"); --icon-pcn-e-node: url("/icon/pcn--e-node.svg"); --icon-pcn-military: url("/icon/pcn--military.svg"); @@ -1563,8 +1563,8 @@ --icon-pdf: url("/icon/PDF.svg"); --icon-pdf-reference: url("/icon/PDF--reference.svg"); --icon-pedestrian: url("/icon/pedestrian.svg"); - --icon-pedestrian-child: url("/icon/pedestrian-child.svg"); --icon-pedestrian-family: url("/icon/pedestrian--family.svg"); + --icon-pedestrian-child: url("/icon/pedestrian-child.svg"); --icon-pen: url("/icon/pen.svg"); --icon-pen-fountain: url("/icon/pen--fountain.svg"); --icon-pending: url("/icon/pending.svg"); @@ -1642,16 +1642,16 @@ --icon-radar-enhanced: url("/icon/radar--enhanced.svg"); --icon-radar-weather: url("/icon/radar--weather.svg"); --icon-radio: url("/icon/radio.svg"); - --icon-radio-button: url("/icon/radio-button.svg"); - --icon-radio-button-checked: url("/icon/radio-button--checked.svg"); --icon-radio-combat: url("/icon/radio--combat.svg"); --icon-radio-push-to-talk: url("/icon/radio--push-to-talk.svg"); + --icon-radio-button: url("/icon/radio-button.svg"); + --icon-radio-button-checked: url("/icon/radio-button--checked.svg"); --icon-rain: url("/icon/rain.svg"); --icon-rain-drizzle: url("/icon/rain--drizzle.svg"); - --icon-rain-drop: url("/icon/rain-drop.svg"); --icon-rain-heavy: url("/icon/rain--heavy.svg"); --icon-rain-scattered: url("/icon/rain--scattered.svg"); --icon-rain-scattered-night: url("/icon/rain--scattered--night.svg"); + --icon-rain-drop: url("/icon/rain-drop.svg"); --icon-raw: url("/icon/RAW.svg"); --icon-receipt: url("/icon/receipt.svg"); --icon-recently-viewed: url("/icon/recently-viewed.svg"); @@ -1769,8 +1769,8 @@ --icon-send: url("/icon/send.svg"); --icon-send-alt: url("/icon/send--alt.svg"); --icon-send-alt-filled: url("/icon/send--alt--filled.svg"); - --icon-send-backward: url("/icon/send-backward.svg"); --icon-send-filled: url("/icon/send--filled.svg"); + --icon-send-backward: url("/icon/send-backward.svg"); --icon-send-to-back: url("/icon/send-to-back.svg"); --icon-server-dns: url("/icon/server--dns.svg"); --icon-server-proxy: url("/icon/server--proxy.svg"); @@ -1832,10 +1832,10 @@ --icon-snooze: url("/icon/snooze.svg"); --icon-snow: url("/icon/snow.svg"); --icon-snow-blizzard: url("/icon/snow--blizzard.svg"); - --icon-snow-density: url("/icon/snow-density.svg"); --icon-snow-heavy: url("/icon/snow--heavy.svg"); --icon-snow-scattered: url("/icon/snow--scattered.svg"); --icon-snow-scattered-night: url("/icon/snow--scattered--night.svg"); + --icon-snow-density: url("/icon/snow-density.svg"); --icon-snowflake: url("/icon/snowflake.svg"); --icon-soccer: url("/icon/soccer.svg"); --icon-soil-moisture: url("/icon/soil-moisture.svg"); @@ -1916,9 +1916,9 @@ --icon-table: url("/icon/table.svg"); --icon-table-alias: url("/icon/table--alias.svg"); --icon-table-built: url("/icon/table--built.svg"); - --icon-table-of-contents: url("/icon/table-of-contents.svg"); --icon-table-shortcut: url("/icon/table--shortcut.svg"); --icon-table-split: url("/icon/table--split.svg"); + --icon-table-of-contents: url("/icon/table-of-contents.svg"); --icon-tablet: url("/icon/tablet.svg"); --icon-tablet-landscape: url("/icon/tablet--landscape.svg"); --icon-tag: url("/icon/tag.svg"); @@ -1965,7 +1965,6 @@ --icon-text-align-mixed: url("/icon/text--align--mixed.svg"); --icon-text-align-right: url("/icon/text--align--right.svg"); --icon-text-all-caps: url("/icon/text--all-caps.svg"); - --icon-text-annotation-toggle: url("/icon/text-annotation-toggle.svg"); --icon-text-bold: url("/icon/text--bold.svg"); --icon-text-clear-format: url("/icon/text--clear-format.svg"); --icon-text-color: url("/icon/text--color.svg"); @@ -1981,10 +1980,6 @@ --icon-text-kerning: url("/icon/text--kerning.svg"); --icon-text-leading: url("/icon/text--leading.svg"); --icon-text-line-spacing: url("/icon/text--line-spacing.svg"); - --icon-text-link: url("/icon/text-link.svg"); - --icon-text-link-analysis: url("/icon/text-link--analysis.svg"); - --icon-text-mining: url("/icon/text-mining.svg"); - --icon-text-mining-applier: url("/icon/text-mining--applier.svg"); --icon-text-new-line: url("/icon/text--new-line.svg"); --icon-text-scale: url("/icon/text--scale.svg"); --icon-text-selection: url("/icon/text--selection.svg"); @@ -1996,6 +1991,11 @@ --icon-text-underline: url("/icon/text--underline.svg"); --icon-text-vertical-alignment: url("/icon/text--vertical-alignment.svg"); --icon-text-wrap: url("/icon/text--wrap.svg"); + --icon-text-annotation-toggle: url("/icon/text-annotation-toggle.svg"); + --icon-text-link: url("/icon/text-link.svg"); + --icon-text-link-analysis: url("/icon/text-link--analysis.svg"); + --icon-text-mining: url("/icon/text-mining.svg"); + --icon-text-mining-applier: url("/icon/text-mining--applier.svg"); --icon-theater: url("/icon/theater.svg"); --icon-this-side-up: url("/icon/this-side-up.svg"); --icon-threshold: url("/icon/threshold.svg"); @@ -2024,18 +2024,18 @@ --icon-tornado: url("/icon/tornado.svg"); --icon-tornado-warning: url("/icon/tornado-warning.svg"); --icon-touch-1: url("/icon/touch--1.svg"); + --icon-touch-1-filled: url("/icon/touch--1--filled.svg"); --icon-touch-1-down: url("/icon/touch--1-down.svg"); --icon-touch-1-down-filled: url("/icon/touch--1-down--filled.svg"); - --icon-touch-1-filled: url("/icon/touch--1--filled.svg"); --icon-touch-2: url("/icon/touch--2.svg"); --icon-touch-2-filled: url("/icon/touch--2--filled.svg"); --icon-touch-interaction: url("/icon/touch--interaction.svg"); - --icon-traffic-cone: url("/icon/traffic-cone.svg"); --icon-traffic-event: url("/icon/traffic--event.svg"); --icon-traffic-flow: url("/icon/traffic--flow.svg"); --icon-traffic-flow-incident: url("/icon/traffic--flow-incident.svg"); --icon-traffic-incident: url("/icon/traffic--incident.svg"); --icon-traffic-weather-incident: url("/icon/traffic--weather-incident.svg"); + --icon-traffic-cone: url("/icon/traffic-cone.svg"); --icon-train: url("/icon/train.svg"); --icon-train-heart: url("/icon/train--heart.svg"); --icon-train-profile: url("/icon/train--profile.svg"); @@ -2102,13 +2102,13 @@ --icon-user-multiple: url("/icon/user--multiple.svg"); --icon-user-online: url("/icon/user--online.svg"); --icon-user-profile: url("/icon/user--profile.svg"); - --icon-user-profile-alt: url("/icon/user-profile--alt.svg"); --icon-user-role: url("/icon/user--role.svg"); --icon-user-service-desk: url("/icon/user--service-desk.svg"); --icon-user-settings: url("/icon/user--settings.svg"); --icon-user-simulation: url("/icon/user--simulation.svg"); --icon-user-speaker: url("/icon/user--speaker.svg"); --icon-user-x-ray: url("/icon/user--x-ray.svg"); + --icon-user-profile-alt: url("/icon/user-profile--alt.svg"); --icon-uv-index: url("/icon/uv-index.svg"); --icon-uv-index-alt: url("/icon/uv-index--alt.svg"); --icon-uv-index-filled: url("/icon/uv-index--filled.svg"); @@ -2131,9 +2131,9 @@ --icon-view-filled: url("/icon/view--filled.svg"); --icon-view-mode-1: url("/icon/view--mode-1.svg"); --icon-view-mode-2: url("/icon/view--mode-2.svg"); - --icon-view-next: url("/icon/view-next.svg"); --icon-view-off: url("/icon/view--off.svg"); --icon-view-off-filled: url("/icon/view--off--filled.svg"); + --icon-view-next: url("/icon/view-next.svg"); --icon-virtual-column: url("/icon/virtual-column.svg"); --icon-virtual-column-key: url("/icon/virtual-column--key.svg"); --icon-virtual-desktop: url("/icon/virtual-desktop.svg"); @@ -2188,12 +2188,12 @@ --icon-websheet: url("/icon/websheet.svg"); --icon-wheat: url("/icon/wheat.svg"); --icon-wifi: url("/icon/wifi.svg"); - --icon-wifi-bridge: url("/icon/wifi-bridge.svg"); - --icon-wifi-bridge-alt: url("/icon/wifi-bridge--alt.svg"); --icon-wifi-controller: url("/icon/wifi--controller.svg"); --icon-wifi-not-secure: url("/icon/wifi--not-secure.svg"); --icon-wifi-off: url("/icon/wifi--off.svg"); --icon-wifi-secure: url("/icon/wifi--secure.svg"); + --icon-wifi-bridge: url("/icon/wifi-bridge.svg"); + --icon-wifi-bridge-alt: url("/icon/wifi-bridge--alt.svg"); --icon-wikis: url("/icon/wikis.svg"); --icon-wind-gusts: url("/icon/wind-gusts.svg"); --icon-wind-power: url("/icon/wind-power.svg"); @@ -2234,8 +2234,8 @@ --icon-zoom-in-area: url("/icon/zoom--in-area.svg"); --icon-zoom-out: url("/icon/zoom--out.svg"); --icon-zoom-out-area: url("/icon/zoom--out-area.svg"); - --icon-zoom-pan: url("/icon/zoom-pan.svg"); --icon-zoom-reset: url("/icon/zoom--reset.svg"); + --icon-zoom-pan: url("/icon/zoom-pan.svg"); --spacing-2xl: 40px; --spacing-2xs: 4px; --spacing-3xl: 48px; diff --git a/packages/plugin-css/test/fixtures/ds-microsoft-fluent/want.css b/packages/plugin-css/test/fixtures/ds-microsoft-fluent/want.css index 3d4001ea9..9449d6291 100644 --- a/packages/plugin-css/test/fixtures/ds-microsoft-fluent/want.css +++ b/packages/plugin-css/test/fixtures/ds-microsoft-fluent/want.css @@ -954,93 +954,110 @@ --stroke-width-thickest: 4px; --stroke-width-thin: 1px; --typography-body1-font-family: var(--typography-family-base); /* Body */ - --typography-body1-font-size: 0.875rem; /* Body */ --typography-body1-font-weight: var(--typography-weight-regular); /* Body */ - --typography-body1-letter-spacing: 0; /* Body */ + --typography-body1-font-size: 0.875rem; /* Body */ --typography-body1-line-height: 1.4285714286; /* Body */ + --typography-body1-letter-spacing: 0; /* Body */ + --typography-body1: var(--typography-body1-font-weight) var(--typography-body1-font-size)/var(--typography-body1-line-height) var(--typography-body1-font-family); /* Body */ --typography-body1-strong-font-family: var(--typography-family-base); /* Body (unread), button */ - --typography-body1-strong-font-size: 0.875rem; /* Body (unread), button */ --typography-body1-strong-font-weight: var(--typography-weight-semibold); /* Body (unread), button */ - --typography-body1-strong-letter-spacing: 0; /* Body (unread), button */ + --typography-body1-strong-font-size: 0.875rem; /* Body (unread), button */ --typography-body1-strong-line-height: 1.4285714286; /* Body (unread), button */ + --typography-body1-strong-letter-spacing: 0; /* Body (unread), button */ + --typography-body1-strong: var(--typography-body1-strong-font-weight) var(--typography-body1-strong-font-size)/var(--typography-body1-strong-line-height) var(--typography-body1-strong-font-family); /* Body (unread), button */ --typography-body1-stronger-font-family: var(--typography-family-base); - --typography-body1-stronger-font-size: 0.875rem; --typography-body1-stronger-font-weight: var(--typography-weight-bold); - --typography-body1-stronger-letter-spacing: 0; + --typography-body1-stronger-font-size: 0.875rem; --typography-body1-stronger-line-height: 1.4285714286; + --typography-body1-stronger-letter-spacing: 0; + --typography-body1-stronger: var(--typography-body1-stronger-font-weight) var(--typography-body1-stronger-font-size)/var(--typography-body1-stronger-line-height) var(--typography-body1-stronger-font-family); --typography-body2-font-family: var(--typography-family-base); /* Large size input, text area, and dropdown */ - --typography-body2-font-size: 1rem; /* Large size input, text area, and dropdown */ --typography-body2-font-weight: var(--typography-weight-regular); /* Large size input, text area, and dropdown */ - --typography-body2-letter-spacing: 0; /* Large size input, text area, and dropdown */ + --typography-body2-font-size: 1rem; /* Large size input, text area, and dropdown */ --typography-body2-line-height: 1.375; /* Large size input, text area, and dropdown */ + --typography-body2-letter-spacing: 0; /* Large size input, text area, and dropdown */ + --typography-body2: var(--typography-body2-font-weight) var(--typography-body2-font-size)/var(--typography-body2-line-height) var(--typography-body2-font-family); /* Large size input, text area, and dropdown */ --typography-body2-strong-font-family: var(--typography-family-base); /* Subject title */ - --typography-body2-strong-font-size: 1rem; /* Subject title */ --typography-body2-strong-font-weight: var(--typography-weight-semibold); /* Subject title */ - --typography-body2-strong-letter-spacing: 0; /* Subject title */ + --typography-body2-strong-font-size: 1rem; /* Subject title */ --typography-body2-strong-line-height: 1.375; /* Subject title */ + --typography-body2-strong-letter-spacing: 0; /* Subject title */ + --typography-body2-strong: var(--typography-body2-strong-font-weight) var(--typography-body2-strong-font-size)/var(--typography-body2-strong-line-height) var(--typography-body2-strong-font-family); /* Subject title */ --typography-body2-stronger-font-family: var(--typography-family-base); - --typography-body2-stronger-font-size: 1rem; --typography-body2-stronger-font-weight: var(--typography-weight-bold); - --typography-body2-stronger-letter-spacing: 0; + --typography-body2-stronger-font-size: 1rem; --typography-body2-stronger-line-height: 1.375; + --typography-body2-stronger-letter-spacing: 0; + --typography-body2-stronger: var(--typography-body2-stronger-font-weight) var(--typography-body2-stronger-font-size)/var(--typography-body2-stronger-line-height) var(--typography-body2-stronger-font-family); --typography-caption1-font-family: var(--typography-family-base); /* Caption */ - --typography-caption1-font-size: 0.75rem; /* Caption */ --typography-caption1-font-weight: var(--typography-weight-regular); /* Caption */ - --typography-caption1-letter-spacing: 0; /* Caption */ + --typography-caption1-font-size: 0.75rem; /* Caption */ --typography-caption1-line-height: 1.3333333333; /* Caption */ + --typography-caption1-letter-spacing: 0; /* Caption */ + --typography-caption1: var(--typography-caption1-font-weight) var(--typography-caption1-font-size)/var(--typography-caption1-line-height) var(--typography-caption1-font-family); /* Caption */ --typography-caption1-strong-font-family: var(--typography-family-base); /* Caption (unread) */ - --typography-caption1-strong-font-size: 0.75rem; /* Caption (unread) */ --typography-caption1-strong-font-weight: var(--typography-weight-semibold); /* Caption (unread) */ - --typography-caption1-strong-letter-spacing: 0; /* Caption (unread) */ + --typography-caption1-strong-font-size: 0.75rem; /* Caption (unread) */ --typography-caption1-strong-line-height: 1.3333333333; /* Caption (unread) */ + --typography-caption1-strong-letter-spacing: 0; /* Caption (unread) */ + --typography-caption1-strong: var(--typography-caption1-strong-font-weight) var(--typography-caption1-strong-font-size)/var(--typography-caption1-strong-line-height) var(--typography-caption1-strong-font-family); /* Caption (unread) */ --typography-caption1-stronger-font-family: var(--typography-family-base); - --typography-caption1-stronger-font-size: 0.75rem; --typography-caption1-stronger-font-weight: var(--typography-weight-bold); - --typography-caption1-stronger-letter-spacing: 0; + --typography-caption1-stronger-font-size: 0.75rem; --typography-caption1-stronger-line-height: 1.3333333333; + --typography-caption1-stronger-letter-spacing: 0; + --typography-caption1-stronger: var(--typography-caption1-stronger-font-weight) var(--typography-caption1-stronger-font-size)/var(--typography-caption1-stronger-line-height) var(--typography-caption1-stronger-font-family); --typography-caption2-font-family: var(--typography-family-base); /* Metadata (limited) */ - --typography-caption2-font-size: 0.625rem; /* Metadata (limited) */ --typography-caption2-font-weight: var(--typography-weight-regular); /* Metadata (limited) */ - --typography-caption2-letter-spacing: 0; /* Metadata (limited) */ + --typography-caption2-font-size: 0.625rem; /* Metadata (limited) */ --typography-caption2-line-height: 1.4; /* Metadata (limited) */ + --typography-caption2-letter-spacing: 0; /* Metadata (limited) */ + --typography-caption2: var(--typography-caption2-font-weight) var(--typography-caption2-font-size)/var(--typography-caption2-line-height) var(--typography-caption2-font-family); /* Metadata (limited) */ --typography-caption2-strong-font-family: var(--typography-family-base); /* Metadata (limited) */ - --typography-caption2-strong-font-size: 0.625rem; /* Metadata (limited) */ --typography-caption2-strong-font-weight: var(--typography-weight-semibold); /* Metadata (limited) */ - --typography-caption2-strong-letter-spacing: 0; /* Metadata (limited) */ + --typography-caption2-strong-font-size: 0.625rem; /* Metadata (limited) */ --typography-caption2-strong-line-height: 1.4; /* Metadata (limited) */ + --typography-caption2-strong-letter-spacing: 0; /* Metadata (limited) */ + --typography-caption2-strong: var(--typography-caption2-strong-font-weight) var(--typography-caption2-strong-font-size)/var(--typography-caption2-strong-line-height) var(--typography-caption2-strong-font-family); /* Metadata (limited) */ --typography-display-font-family: var(--typography-family-base); /* XL Numerics (Limited) */ - --typography-display-font-size: 4.25rem; /* XL Numerics (Limited) */ --typography-display-font-weight: var(--typography-weight-bold); /* XL Numerics (Limited) */ - --typography-display-letter-spacing: 0; /* XL Numerics (Limited) */ + --typography-display-font-size: 4.25rem; /* XL Numerics (Limited) */ --typography-display-line-height: 1.3529411765; /* XL Numerics (Limited) */ + --typography-display-letter-spacing: 0; /* XL Numerics (Limited) */ + --typography-display: var(--typography-display-font-weight) var(--typography-display-font-size)/var(--typography-display-line-height) var(--typography-display-font-family); /* XL Numerics (Limited) */ --typography-family-base: "Segoe UI Web (West European)", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif; --typography-family-monospace: "Consolas", "Courier New", "Courier", monospace; --typography-family-numeric: "Bahnschrift", "Segoe UI", "Segoe UI Web (West European)", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif; --typography-large-title-font-family: var(--typography-family-base); /* Hero title */ - --typography-large-title-font-size: 2.5rem; /* Hero title */ --typography-large-title-font-weight: var(--typography-weight-semibold); /* Hero title */ - --typography-large-title-letter-spacing: 0; /* Hero title */ + --typography-large-title-font-size: 2.5rem; /* Hero title */ --typography-large-title-line-height: 1.3; /* Hero title */ + --typography-large-title-letter-spacing: 0; /* Hero title */ + --typography-large-title: var(--typography-large-title-font-weight) var(--typography-large-title-font-size)/var(--typography-large-title-line-height) var(--typography-large-title-font-family); /* Hero title */ --typography-subtitle1-font-family: var(--typography-family-base); /* Page header / Pane header */ - --typography-subtitle1-font-size: 1.25rem; /* Page header / Pane header */ --typography-subtitle1-font-weight: var(--typography-weight-regular); /* Page header / Pane header */ - --typography-subtitle1-letter-spacing: 0; /* Page header / Pane header */ + --typography-subtitle1-font-size: 1.25rem; /* Page header / Pane header */ --typography-subtitle1-line-height: 1.4; /* Page header / Pane header */ + --typography-subtitle1-letter-spacing: 0; /* Page header / Pane header */ + --typography-subtitle1: var(--typography-subtitle1-font-weight) var(--typography-subtitle1-font-size)/var(--typography-subtitle1-line-height) var(--typography-subtitle1-font-family); /* Page header / Pane header */ --typography-title1-font-family: var(--typography-family-base); /* Greeting title */ - --typography-title1-font-size: 2rem; /* Greeting title */ --typography-title1-font-weight: var(--typography-weight-semibold); /* Greeting title */ - --typography-title1-letter-spacing: 0; /* Greeting title */ + --typography-title1-font-size: 2rem; /* Greeting title */ --typography-title1-line-height: 1.25; /* Greeting title */ + --typography-title1-letter-spacing: 0; /* Greeting title */ + --typography-title1: var(--typography-title1-font-weight) var(--typography-title1-font-size)/var(--typography-title1-line-height) var(--typography-title1-font-family); /* Greeting title */ --typography-title2-font-family: var(--typography-family-base); /* Page title */ - --typography-title2-font-size: 1.75rem; /* Page title */ --typography-title2-font-weight: var(--typography-weight-semibold); /* Page title */ - --typography-title2-letter-spacing: 0; /* Page title */ + --typography-title2-font-size: 1.75rem; /* Page title */ --typography-title2-line-height: 1.2857142857; /* Page title */ + --typography-title2-letter-spacing: 0; /* Page title */ + --typography-title2: var(--typography-title2-font-weight) var(--typography-title2-font-size)/var(--typography-title2-line-height) var(--typography-title2-font-family); /* Page title */ --typography-title3-font-family: var(--typography-family-base); /* Email header */ - --typography-title3-font-size: 1.5rem; /* Email header */ --typography-title3-font-weight: var(--typography-weight-semibold); /* Email header */ - --typography-title3-letter-spacing: 0; /* Email header */ + --typography-title3-font-size: 1.5rem; /* Email header */ --typography-title3-line-height: 2; /* Email header */ + --typography-title3-letter-spacing: 0; /* Email header */ + --typography-title3: var(--typography-title3-font-weight) var(--typography-title3-font-size)/var(--typography-title3-line-height) var(--typography-title3-font-family); /* Email header */ --typography-weight-bold: 700; --typography-weight-regular: 400; --typography-weight-semibold: 600; diff --git a/packages/plugin-css/test/fixtures/ds-radix/want.css b/packages/plugin-css/test/fixtures/ds-radix/want.css index 35df66b45..010d5598b 100644 --- a/packages/plugin-css/test/fixtures/ds-radix/want.css +++ b/packages/plugin-css/test/fixtures/ds-radix/want.css @@ -424,21 +424,6 @@ @media (prefers-color-scheme: light) { :root { - --border-color-default: var(--color-primitive-gray-6); - --border-color-hover: var(--color-primitive-gray-7); - --color-bg-action-default: var(--color-primitive-iris-9); - --color-bg-action-hover: var(--color-primitive-iris-10); - --color-bg-active: var(--color-primitive-gray-5); - --color-bg-default: var(--color-primitive-gray-1); - --color-bg-error-default: var(--color-primitive-ruby-9); - --color-bg-error-hover: var(--color-primitive-ruby-10); - --color-bg-hover: var(--color-primitive-gray-4); - --color-bg-subtle: var(--color-primitive-gray-2); - --color-bg-success-default: var(--color-primitive-grass-9); - --color-bg-success-hover: var(--color-primitive-grass-10); - --color-bg-ui: var(--color-primitive-gray-3); - --color-bg-warn-default: var(--color-primitive-amber-9); - --color-bg-warn-hover: var(--color-primitive-amber-10); --color-primitive-amber-1: color(srgb 0.996078431372549 0.9921568627450981 0.984313725490196); --color-primitive-amber-2: color(srgb 0.996078431372549 0.984313725490196 0.9137254901960784); --color-primitive-amber-3: color(srgb 1 0.9686274509803922 0.7607843137254902); @@ -811,31 +796,31 @@ --color-primitive-yellow-10: color(srgb 1 0.8627450980392157 0); --color-primitive-yellow-11: color(srgb 0.6196078431372549 0.4235294117647059 0); --color-primitive-yellow-12: color(srgb 0.2784313725490196 0.23137254901960785 0.12156862745098039); + --color-bg-warn-default: var(--color-primitive-amber-9); + --color-bg-warn-hover: var(--color-primitive-amber-10); + --color-bg-success-default: var(--color-primitive-grass-9); + --color-bg-success-hover: var(--color-primitive-grass-10); + --color-bg-default: var(--color-primitive-gray-1); --color-text-action-default: var(--color-primitive-gray-1); - --color-text-default: var(--color-primitive-gray-12); --color-text-error-default: var(--color-primitive-gray-1); - --color-text-subtle: var(--color-primitive-gray-11); --color-text-success-default: var(--color-primitive-gray-1); --color-text-warn-default: var(--color-primitive-gray-1); + --color-bg-subtle: var(--color-primitive-gray-2); + --color-bg-ui: var(--color-primitive-gray-3); + --color-bg-hover: var(--color-primitive-gray-4); + --color-bg-active: var(--color-primitive-gray-5); + --border-color-default: var(--color-primitive-gray-6); + --border-color-hover: var(--color-primitive-gray-7); + --color-text-subtle: var(--color-primitive-gray-11); + --color-text-default: var(--color-primitive-gray-12); + --color-bg-action-default: var(--color-primitive-iris-9); + --color-bg-action-hover: var(--color-primitive-iris-10); + --color-bg-error-default: var(--color-primitive-ruby-9); + --color-bg-error-hover: var(--color-primitive-ruby-10); } } [data-color-theme="light"] { - --border-color-default: var(--color-primitive-gray-6); - --border-color-hover: var(--color-primitive-gray-7); - --color-bg-action-default: var(--color-primitive-iris-9); - --color-bg-action-hover: var(--color-primitive-iris-10); - --color-bg-active: var(--color-primitive-gray-5); - --color-bg-default: var(--color-primitive-gray-1); - --color-bg-error-default: var(--color-primitive-ruby-9); - --color-bg-error-hover: var(--color-primitive-ruby-10); - --color-bg-hover: var(--color-primitive-gray-4); - --color-bg-subtle: var(--color-primitive-gray-2); - --color-bg-success-default: var(--color-primitive-grass-9); - --color-bg-success-hover: var(--color-primitive-grass-10); - --color-bg-ui: var(--color-primitive-gray-3); - --color-bg-warn-default: var(--color-primitive-amber-9); - --color-bg-warn-hover: var(--color-primitive-amber-10); --color-primitive-amber-1: color(srgb 0.996078431372549 0.9921568627450981 0.984313725490196); --color-primitive-amber-2: color(srgb 0.996078431372549 0.984313725490196 0.9137254901960784); --color-primitive-amber-3: color(srgb 1 0.9686274509803922 0.7607843137254902); @@ -1208,31 +1193,31 @@ --color-primitive-yellow-10: color(srgb 1 0.8627450980392157 0); --color-primitive-yellow-11: color(srgb 0.6196078431372549 0.4235294117647059 0); --color-primitive-yellow-12: color(srgb 0.2784313725490196 0.23137254901960785 0.12156862745098039); + --color-bg-warn-default: var(--color-primitive-amber-9); + --color-bg-warn-hover: var(--color-primitive-amber-10); + --color-bg-success-default: var(--color-primitive-grass-9); + --color-bg-success-hover: var(--color-primitive-grass-10); + --color-bg-default: var(--color-primitive-gray-1); --color-text-action-default: var(--color-primitive-gray-1); - --color-text-default: var(--color-primitive-gray-12); --color-text-error-default: var(--color-primitive-gray-1); - --color-text-subtle: var(--color-primitive-gray-11); --color-text-success-default: var(--color-primitive-gray-1); --color-text-warn-default: var(--color-primitive-gray-1); + --color-bg-subtle: var(--color-primitive-gray-2); + --color-bg-ui: var(--color-primitive-gray-3); + --color-bg-hover: var(--color-primitive-gray-4); + --color-bg-active: var(--color-primitive-gray-5); + --border-color-default: var(--color-primitive-gray-6); + --border-color-hover: var(--color-primitive-gray-7); + --color-text-subtle: var(--color-primitive-gray-11); + --color-text-default: var(--color-primitive-gray-12); + --color-bg-action-default: var(--color-primitive-iris-9); + --color-bg-action-hover: var(--color-primitive-iris-10); + --color-bg-error-default: var(--color-primitive-ruby-9); + --color-bg-error-hover: var(--color-primitive-ruby-10); } @media (prefers-color-scheme: dark) { :root { - --border-color-default: var(--color-primitive-gray-6); - --border-color-hover: var(--color-primitive-gray-7); - --color-bg-action-default: var(--color-primitive-iris-9); - --color-bg-action-hover: var(--color-primitive-iris-10); - --color-bg-active: var(--color-primitive-gray-5); - --color-bg-default: var(--color-primitive-gray-1); - --color-bg-error-default: var(--color-primitive-ruby-9); - --color-bg-error-hover: var(--color-primitive-ruby-10); - --color-bg-hover: var(--color-primitive-gray-4); - --color-bg-subtle: var(--color-primitive-gray-2); - --color-bg-success-default: var(--color-primitive-grass-9); - --color-bg-success-hover: var(--color-primitive-grass-10); - --color-bg-ui: var(--color-primitive-gray-3); - --color-bg-warn-default: var(--color-primitive-amber-9); - --color-bg-warn-hover: var(--color-primitive-amber-10); --color-primitive-amber-1: color(srgb 0.08627450980392157 0.07058823529411765 0.047058823529411764); --color-primitive-amber-2: color(srgb 0.11372549019607843 0.09411764705882353 0.058823529411764705); --color-primitive-amber-3: color(srgb 0.18823529411764706 0.12549019607843137 0.03137254901960784); @@ -1605,31 +1590,31 @@ --color-primitive-yellow-10: color(srgb 1 1 0.3411764705882353); --color-primitive-yellow-11: color(srgb 0.9607843137254902 0.8823529411764706 0.2784313725490196); --color-primitive-yellow-12: color(srgb 0.9647058823529412 0.9333333333333333 0.7058823529411765); + --color-bg-warn-default: var(--color-primitive-amber-9); + --color-bg-warn-hover: var(--color-primitive-amber-10); + --color-bg-success-default: var(--color-primitive-grass-9); + --color-bg-success-hover: var(--color-primitive-grass-10); + --color-bg-default: var(--color-primitive-gray-1); --color-text-action-default: var(--color-primitive-gray-1); - --color-text-default: var(--color-primitive-gray-12); --color-text-error-default: var(--color-primitive-gray-1); - --color-text-subtle: var(--color-primitive-gray-11); --color-text-success-default: var(--color-primitive-gray-1); --color-text-warn-default: var(--color-primitive-gray-1); + --color-bg-subtle: var(--color-primitive-gray-2); + --color-bg-ui: var(--color-primitive-gray-3); + --color-bg-hover: var(--color-primitive-gray-4); + --color-bg-active: var(--color-primitive-gray-5); + --border-color-default: var(--color-primitive-gray-6); + --border-color-hover: var(--color-primitive-gray-7); + --color-text-subtle: var(--color-primitive-gray-11); + --color-text-default: var(--color-primitive-gray-12); + --color-bg-action-default: var(--color-primitive-iris-9); + --color-bg-action-hover: var(--color-primitive-iris-10); + --color-bg-error-default: var(--color-primitive-ruby-9); + --color-bg-error-hover: var(--color-primitive-ruby-10); } } [data-color-theme="dark"] { - --border-color-default: var(--color-primitive-gray-6); - --border-color-hover: var(--color-primitive-gray-7); - --color-bg-action-default: var(--color-primitive-iris-9); - --color-bg-action-hover: var(--color-primitive-iris-10); - --color-bg-active: var(--color-primitive-gray-5); - --color-bg-default: var(--color-primitive-gray-1); - --color-bg-error-default: var(--color-primitive-ruby-9); - --color-bg-error-hover: var(--color-primitive-ruby-10); - --color-bg-hover: var(--color-primitive-gray-4); - --color-bg-subtle: var(--color-primitive-gray-2); - --color-bg-success-default: var(--color-primitive-grass-9); - --color-bg-success-hover: var(--color-primitive-grass-10); - --color-bg-ui: var(--color-primitive-gray-3); - --color-bg-warn-default: var(--color-primitive-amber-9); - --color-bg-warn-hover: var(--color-primitive-amber-10); --color-primitive-amber-1: color(srgb 0.08627450980392157 0.07058823529411765 0.047058823529411764); --color-primitive-amber-2: color(srgb 0.11372549019607843 0.09411764705882353 0.058823529411764705); --color-primitive-amber-3: color(srgb 0.18823529411764706 0.12549019607843137 0.03137254901960784); @@ -2002,11 +1987,26 @@ --color-primitive-yellow-10: color(srgb 1 1 0.3411764705882353); --color-primitive-yellow-11: color(srgb 0.9607843137254902 0.8823529411764706 0.2784313725490196); --color-primitive-yellow-12: color(srgb 0.9647058823529412 0.9333333333333333 0.7058823529411765); + --color-bg-warn-default: var(--color-primitive-amber-9); + --color-bg-warn-hover: var(--color-primitive-amber-10); + --color-bg-success-default: var(--color-primitive-grass-9); + --color-bg-success-hover: var(--color-primitive-grass-10); + --color-bg-default: var(--color-primitive-gray-1); --color-text-action-default: var(--color-primitive-gray-1); - --color-text-default: var(--color-primitive-gray-12); --color-text-error-default: var(--color-primitive-gray-1); - --color-text-subtle: var(--color-primitive-gray-11); --color-text-success-default: var(--color-primitive-gray-1); --color-text-warn-default: var(--color-primitive-gray-1); + --color-bg-subtle: var(--color-primitive-gray-2); + --color-bg-ui: var(--color-primitive-gray-3); + --color-bg-hover: var(--color-primitive-gray-4); + --color-bg-active: var(--color-primitive-gray-5); + --border-color-default: var(--color-primitive-gray-6); + --border-color-hover: var(--color-primitive-gray-7); + --color-text-subtle: var(--color-primitive-gray-11); + --color-text-default: var(--color-primitive-gray-12); + --color-bg-action-default: var(--color-primitive-iris-9); + --color-bg-action-hover: var(--color-primitive-iris-10); + --color-bg-error-default: var(--color-primitive-ruby-9); + --color-bg-error-hover: var(--color-primitive-ruby-10); } diff --git a/packages/plugin-css/test/fixtures/ds-salesforce-lightning/want.css b/packages/plugin-css/test/fixtures/ds-salesforce-lightning/want.css index c3c61a36b..0d63d7540 100644 --- a/packages/plugin-css/test/fixtures/ds-salesforce-lightning/want.css +++ b/packages/plugin-css/test/fixtures/ds-salesforce-lightning/want.css @@ -6,8 +6,8 @@ --color-background: var(--color-gray3); --color-background-actionbar-icon-utility: var(--color-gray9); --color-background-alt: var(--palette-neutral100); - --color-background-alt-inverse: var(--palette-blue20); --color-background-alt2: var(--color-gray3); + --color-background-alt-inverse: var(--palette-blue20); --color-background-anchor: var(--color-gray3); --color-background-backdrop: color(srgb 1 1 1 / 0.7490196078431373); --color-background-backdrop-tint: var(--color-gray2); diff --git a/packages/plugin-css/test/fixtures/hex/want.css b/packages/plugin-css/test/fixtures/hex/want.css index ff4e99b40..f467921f5 100644 --- a/packages/plugin-css/test/fixtures/hex/want.css +++ b/packages/plugin-css/test/fixtures/hex/want.css @@ -183,9 +183,9 @@ --ds-color-blue-7: #033d8b; --ds-color-blue-8: #0a3069; --ds-color-blue-9: #002155; - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6334 0.2011 253.922); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -214,9 +214,9 @@ --ds-color-blue-7: #022f7a; --ds-color-blue-8: #032563; --ds-color-blue-9: #021a4a; - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.5435 0.2531 262.092); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -245,9 +245,9 @@ --ds-color-blue-7: #1b4b91; --ds-color-blue-8: #143d79; --ds-color-blue-9: #0f2d5c; - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: #4184e4; --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -262,9 +262,9 @@ --ds-color-blue-7: #2672f3; --ds-color-blue-8: #1e60d5; --ds-color-blue-9: #194fb1; - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6905 0.1695 249.7823); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -293,9 +293,9 @@ --ds-color-blue-7: #0d419d; --ds-color-blue-8: #0c2d6b; --ds-color-blue-9: #051d4d; - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6378 0.197 255.7476); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } diff --git a/packages/plugin-css/test/fixtures/type-border/want.css b/packages/plugin-css/test/fixtures/type-border/want.css index 735388deb..cf68bb6d3 100644 --- a/packages/plugin-css/test/fixtures/type-border/want.css +++ b/packages/plugin-css/test/fixtures/type-border/want.css @@ -30,111 +30,111 @@ @media (color-gamut: p3) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.64 0.2889 16.5768); + --ds-border-red: 1px solid var(--ds-color-red); } } @media (color-gamut: rec2020) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.6388 0.3368 16.2926); + --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: light) { :root { - --ds-border-red: 1px solid var(--ds-color-red); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-border: var(--ds-color-base-gray-20); --ds-color-red: oklch(0.6347 0.254 16.4402); + --ds-border-thick: 2.5px solid var(--ds-color-border); + --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="light"] { - --ds-border-red: 1px solid var(--ds-color-red); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-border: var(--ds-color-base-gray-20); --ds-color-red: oklch(0.6347 0.254 16.4402); + --ds-border-thick: 2.5px solid var(--ds-color-border); + --ds-border-red: 1px solid var(--ds-color-red); } @media (prefers-color-scheme: light) { @media (color-gamut: p3) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.64 0.2889 16.5768); + --ds-border-red: 1px solid var(--ds-color-red); } } } @media (color-gamut: p3) { [data-color-theme="light"] { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.64 0.2889 16.5768); + --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: light) { @media (color-gamut: rec2020) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.6388 0.3368 16.2926); + --ds-border-red: 1px solid var(--ds-color-red); } } } @media (color-gamut: rec2020) { [data-color-theme="light"] { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.6388 0.3368 16.2926); + --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: dark) { :root { - --ds-border-red: 1px solid var(--ds-color-red); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-border: var(--ds-color-base-gray-80); --ds-color-red: oklch(0.353 0.1415 18.1514); + --ds-border-thick: 2.5px solid var(--ds-color-border); + --ds-border-red: 1px solid var(--ds-color-red); } } [data-color-theme="dark"] { - --ds-border-red: 1px solid var(--ds-color-red); - --ds-border-thick: 2.5px solid var(--ds-color-border); --ds-color-border: var(--ds-color-base-gray-80); --ds-color-red: oklch(0.353 0.1415 18.1514); + --ds-border-thick: 2.5px solid var(--ds-color-border); + --ds-border-red: 1px solid var(--ds-color-red); } @media (prefers-color-scheme: dark) { @media (color-gamut: p3) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.3518 0.159 17.9744); + --ds-border-red: 1px solid var(--ds-color-red); } } } @media (color-gamut: p3) { [data-color-theme="dark"] { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.3518 0.159 17.9744); + --ds-border-red: 1px solid var(--ds-color-red); } } @media (prefers-color-scheme: dark) { @media (color-gamut: rec2020) { :root { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.3505 0.1849 17.4534); + --ds-border-red: 1px solid var(--ds-color-red); } } } @media (color-gamut: rec2020) { [data-color-theme="dark"] { - --ds-border-red: 1px solid var(--ds-color-red); --ds-color-red: oklch(0.3505 0.1849 17.4534); + --ds-border-red: 1px solid var(--ds-color-red); } } diff --git a/packages/plugin-css/test/fixtures/type-color/want.css b/packages/plugin-css/test/fixtures/type-color/want.css index b81840a1b..c8bb5bec5 100644 --- a/packages/plugin-css/test/fixtures/type-color/want.css +++ b/packages/plugin-css/test/fixtures/type-color/want.css @@ -42,11 +42,6 @@ @media (prefers-color-scheme: light) { :root { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.8666666666666667 0.9568627450980393 1); --ds-color-blue-1: color(srgb 0.7137254901960784 0.8901960784313725 1); --ds-color-blue-2: color(srgb 0.5019607843137255 0.8 1); @@ -60,16 +55,16 @@ --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-hdr-blue: oklch(0.6334 0.2011 253.922); --ds-color-text-action: var(--ds-color-blue-6); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="light"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.8666666666666667 0.9568627450980393 1); --ds-color-blue-1: color(srgb 0.7137254901960784 0.8901960784313725 1); --ds-color-blue-2: color(srgb 0.5019607843137255 0.8 1); @@ -83,6 +78,11 @@ --ds-color-control-border-focus: var(--ds-color-blue-7); --ds-color-hdr-blue: oklch(0.6334 0.2011 253.922); --ds-color-text-action: var(--ds-color-blue-6); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -120,11 +120,6 @@ @media (prefers-color-scheme: dark) { :root { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.792156862745098 0.9098039215686274 1); --ds-color-blue-1: color(srgb 0.6470588235294118 0.8392156862745098 1); --ds-color-blue-2: color(srgb 0.4745098039215686 0.7529411764705882 1); @@ -138,16 +133,16 @@ --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6378 0.197 255.7476); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-hdr: var(--ds-color-hdr-blue); } } [data-color-theme="dark"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.792156862745098 0.9098039215686274 1); --ds-color-blue-1: color(srgb 0.6470588235294118 0.8392156862745098 1); --ds-color-blue-2: color(srgb 0.4745098039215686 0.7529411764705882 1); @@ -161,6 +156,11 @@ --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6378 0.197 255.7476); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -197,11 +197,6 @@ } [data-color-theme="light-colorblind"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.8666666666666667 0.9568627450980393 1); --ds-color-blue-1: color(srgb 0.7137254901960784 0.8901960784313725 1); --ds-color-blue-2: color(srgb 0.5019607843137255 0.8 1); @@ -212,9 +207,14 @@ --ds-color-blue-7: color(srgb 0.011764705882352941 0.23921568627450981 0.5450980392156862); --ds-color-blue-8: color(srgb 0.0392156862745098 0.18823529411764706 0.4117647058823529); --ds-color-blue-9: color(srgb 0 0.12941176470588237 0.3333333333333333); - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6334 0.2011 253.922); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -233,11 +233,6 @@ } [data-color-theme="light-high-contrast"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.8745098039215686 0.9686274509803922 1); --ds-color-blue-1: color(srgb 0.611764705882353 0.8431372549019608 1); --ds-color-blue-2: color(srgb 0.403921568627451 0.7019607843137254 0.9921568627450981); @@ -248,9 +243,14 @@ --ds-color-blue-7: color(srgb 0.00784313725490196 0.1843137254901961 0.47843137254901963); --ds-color-blue-8: color(srgb 0.011764705882352941 0.1450980392156863 0.38823529411764707); --ds-color-blue-9: color(srgb 0.00784313725490196 0.10196078431372549 0.2901960784313726); - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.5435 0.2531 262.092); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -269,11 +269,6 @@ } [data-color-theme="dark-dimmed"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.7764705882352941 0.9019607843137255 1); --ds-color-blue-1: color(srgb 0.5882352941176471 0.8156862745098039 1); --ds-color-blue-2: color(srgb 0.4235294117647059 0.7137254901960784 1); @@ -284,18 +279,18 @@ --ds-color-blue-7: color(srgb 0.10588235294117647 0.29411764705882354 0.5686274509803921); --ds-color-blue-8: color(srgb 0.0784313725490196 0.23921568627450981 0.4745098039215686); --ds-color-blue-9: color(srgb 0.058823529411764705 0.17647058823529413 0.3607843137254902); - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6177 0.161 257.75); - --ds-color-text-action: var(--ds-color-blue-5); - --ds-color-text-hdr: var(--ds-color-hdr-blue); -} - -[data-color-theme="dark-high-contrast"] { --ds-color-alias-1: var(--ds-color-blue-6); --ds-color-alias-2: var(--ds-color-alias-1); --ds-color-alias-3: var(--ds-color-alias-2); --ds-color-alias-4: var(--ds-color-alias-3); --ds-color-alias-5: var(--ds-color-alias-4); + --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); + --ds-color-text-hdr: var(--ds-color-hdr-blue); +} + +[data-color-theme="dark-high-contrast"] { --ds-color-blue-0: color(srgb 0.792156862745098 0.9176470588235294 1); --ds-color-blue-1: color(srgb 0.6784313725490196 0.8627450980392157 1); --ds-color-blue-2: color(srgb 0.5686274509803921 0.796078431372549 1); @@ -306,9 +301,14 @@ --ds-color-blue-7: color(srgb 0.14901960784313725 0.4470588235294118 0.9529411764705882); --ds-color-blue-8: color(srgb 0.11764705882352941 0.3764705882352941 0.8352941176470589); --ds-color-blue-9: color(srgb 0.09803921568627451 0.30980392156862746 0.6941176470588235); - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6905 0.1695 249.7823); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } @@ -327,11 +327,6 @@ } [data-color-theme="dark-colorblind"] { - --ds-color-alias-1: var(--ds-color-blue-6); - --ds-color-alias-2: var(--ds-color-alias-1); - --ds-color-alias-3: var(--ds-color-alias-2); - --ds-color-alias-4: var(--ds-color-alias-3); - --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-blue-0: color(srgb 0.792156862745098 0.9098039215686274 1); --ds-color-blue-1: color(srgb 0.6470588235294118 0.8392156862745098 1); --ds-color-blue-2: color(srgb 0.4745098039215686 0.7529411764705882 1); @@ -342,9 +337,14 @@ --ds-color-blue-7: color(srgb 0.050980392156862744 0.2549019607843137 0.615686274509804); --ds-color-blue-8: color(srgb 0.047058823529411764 0.17647058823529413 0.4196078431372549); --ds-color-blue-9: color(srgb 0.0196078431372549 0.11372549019607843 0.30196078431372547); - --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-hdr-blue: oklch(0.6378 0.197 255.7476); + --ds-color-alias-1: var(--ds-color-blue-6); + --ds-color-alias-2: var(--ds-color-alias-1); + --ds-color-alias-3: var(--ds-color-alias-2); + --ds-color-alias-4: var(--ds-color-alias-3); + --ds-color-alias-5: var(--ds-color-alias-4); --ds-color-text-action: var(--ds-color-blue-5); + --ds-color-control-border-focus: var(--ds-color-blue-6); --ds-color-text-hdr: var(--ds-color-hdr-blue); } diff --git a/packages/plugin-css/test/fixtures/type-dimension/want.css b/packages/plugin-css/test/fixtures/type-dimension/want.css index e07d5cd8d..6674912c7 100644 --- a/packages/plugin-css/test/fixtures/type-dimension/want.css +++ b/packages/plugin-css/test/fixtures/type-dimension/want.css @@ -23,8 +23,6 @@ @media (width >= 600px) { :root { - --ds-control-default-size: var(--ds-space-600); - --ds-control-small-size: var(--ds-space-500); --ds-space-000: 0.25rem; --ds-space-100: 0.375rem; --ds-space-200: 0.75rem; @@ -35,6 +33,8 @@ --ds-space-700: 3.5rem; --ds-space-800: 4rem; --ds-space-900: 6rem; + --ds-control-small-size: var(--ds-space-500); + --ds-control-default-size: var(--ds-space-600); } } diff --git a/packages/plugin-css/test/fixtures/type-typography/want.css b/packages/plugin-css/test/fixtures/type-typography/want.css index 9512f8bc9..c0ea74691 100644 --- a/packages/plugin-css/test/fixtures/type-typography/want.css +++ b/packages/plugin-css/test/fixtures/type-typography/want.css @@ -5,56 +5,63 @@ :root { --ds-typography-body-font-family: var(--ds-typography-family-body); --ds-typography-body-font-size: 16px; - --ds-typography-body-font-variation-settings: "wght" 100, "opsz" 100, "wdth" 50; --ds-typography-body-font-weight: 400; - --ds-typography-body-letter-spacing: 0; + --ds-typography-body-font-variation-settings: "wght" 100, "opsz" 100, "wdth" 50; --ds-typography-body-line-height: 1.5; + --ds-typography-body-letter-spacing: 0; + --ds-typography-body: var(--ds-typography-body-font-weight) var(--ds-typography-body-font-size)/var(--ds-typography-body-line-height) var(--ds-typography-body-font-family); --ds-typography-callout-font-family: var(--ds-typography-family-body); --ds-typography-callout-font-size: 18px; - --ds-typography-callout-font-style: italic; --ds-typography-callout-font-variation-settings: "wght" 100, "opsz" 100, "wdth" 50; --ds-typography-callout-font-weight: 300; - --ds-typography-callout-letter-spacing: 0; + --ds-typography-callout-font-style: italic; --ds-typography-callout-line-height: 1.5; + --ds-typography-callout-letter-spacing: 0; + --ds-typography-callout: var(--ds-typography-callout-font-style) var(--ds-typography-callout-font-weight) var(--ds-typography-callout-font-size)/var(--ds-typography-callout-line-height) var(--ds-typography-callout-font-family); --ds-typography-family-body: "IBM Plex Sans", system-ui, sans-serif; --ds-typography-family-footnote: var(--ds-typography-family-body); --ds-typography-family-heading: "Helvetica"; --ds-typography-label-font-family: var(--ds-typography-body-font-family); --ds-typography-label-font-size: var(--ds-typography-body-font-size); - --ds-typography-label-font-variation-settings: var(--ds-typography-body-font-variation-settings); --ds-typography-label-font-weight: var(--ds-typography-body-font-weight); - --ds-typography-label-letter-spacing: var(--ds-typography-body-letter-spacing); + --ds-typography-label-font-variation-settings: var(--ds-typography-body-font-variation-settings); --ds-typography-label-line-height: var(--ds-typography-body-line-height); + --ds-typography-label-letter-spacing: var(--ds-typography-body-letter-spacing); + --ds-typography-label: var(--ds-typography-label-font-weight) var(--ds-typography-label-font-size)/var(--ds-typography-label-line-height) var(--ds-typography-label-font-family); --ds-typography-page-title-font-family: var(--ds-typography-family-heading); --ds-typography-page-title-font-size: 48px; --ds-typography-page-title-font-variation-settings: "wght" 140, "opsz" 100, "wdth" 50; --ds-typography-page-title-font-weight: 600; - --ds-typography-page-title-letter-spacing: 0.125em; --ds-typography-page-title-line-height: 1.25; + --ds-typography-page-title-letter-spacing: 0.125em; + --ds-typography-page-title: var(--ds-typography-page-title-font-weight) var(--ds-typography-page-title-font-size)/var(--ds-typography-page-title-line-height) var(--ds-typography-page-title-font-family); --ds-typography-subheading-font-family: var(--ds-typography-family-heading); --ds-typography-subheading-font-size: 18px; --ds-typography-subheading-font-variation-settings: "wght" 130, "opsz" 100, "wdth" 50; --ds-typography-subheading-font-weight: 500; - --ds-typography-subheading-letter-spacing: 0.25em; --ds-typography-subheading-line-height: 24px; + --ds-typography-subheading-letter-spacing: 0.25em; --ds-typography-subheading-text-transform: uppercase; + --ds-typography-subheading: var(--ds-typography-subheading-font-weight) var(--ds-typography-subheading-font-size)/var(--ds-typography-subheading-line-height) var(--ds-typography-subheading-font-family); } @media (width >= 600px) { :root { - --ds-typography-body-font-family: inherit; --ds-typography-body-font-size: 14px; + --ds-typography-body-font-family: inherit; --ds-typography-body-font-variation-settings: "wght" 100, "opsz" 100, "wdth" 50; --ds-typography-body-font-weight: 400; --ds-typography-body-letter-spacing: 0; --ds-typography-body-line-height: 1.5; + --ds-typography-body: var(--ds-typography-body-font-weight) var(--ds-typography-body-font-size)/var(--ds-typography-body-line-height) var(--ds-typography-body-font-family); --ds-typography-label-font-family: var(--ds-typography-subheading-font-family); --ds-typography-label-font-size: var(--ds-typography-subheading-font-size); --ds-typography-label-font-variation-settings: var(--ds-typography-subheading-font-variation-settings); --ds-typography-label-font-weight: var(--ds-typography-subheading-font-weight); - --ds-typography-label-letter-spacing: var(--ds-typography-subheading-letter-spacing); --ds-typography-label-line-height: var(--ds-typography-subheading-line-height); + --ds-typography-label-letter-spacing: var(--ds-typography-subheading-letter-spacing); --ds-typography-label-text-transform: var(--ds-typography-subheading-text-transform); + --ds-typography-label: var(--ds-typography-label-font-weight) var(--ds-typography-label-font-size)/var(--ds-typography-label-line-height) var(--ds-typography-label-font-family); } } diff --git a/packages/plugin-css/test/fixtures/utility-css/want.css b/packages/plugin-css/test/fixtures/utility-css/want.css index 2639a3d8b..382ac4fde 100644 --- a/packages/plugin-css/test/fixtures/utility-css/want.css +++ b/packages/plugin-css/test/fixtures/utility-css/want.css @@ -19,12 +19,13 @@ --ds-typography-base-font-family: "Helvetica"; --ds-typography-base-font-size: var(--ds-typography-size-sm); --ds-typography-base-font-style: normal; - --ds-typography-base-font-variant-numeric: tabular-nums; --ds-typography-base-font-weight: 400; + --ds-typography-base-font-variant-numeric: tabular-nums; --ds-typography-base-letter-spacing: 0; --ds-typography-base-line-height: 1.4; --ds-typography-base-text-decoration: none; --ds-typography-base-text-transform: none; + --ds-typography-base: var(--ds-typography-base-font-style) var(--ds-typography-base-font-weight) var(--ds-typography-base-font-size)/var(--ds-typography-base-line-height) var(--ds-typography-base-font-family); --ds-typography-size-lg: 1.25rem; --ds-typography-size-md: 1rem; --ds-typography-size-sm: 0.875rem; @@ -40,12 +41,13 @@ --ds-typography-base-font-family: "Helvetica"; --ds-typography-base-font-size: 1rem; --ds-typography-base-font-style: normal; - --ds-typography-base-font-variant-numeric: tabular-nums; --ds-typography-base-font-weight: 400; + --ds-typography-base-font-variant-numeric: tabular-nums; --ds-typography-base-letter-spacing: 0; --ds-typography-base-line-height: 1.4; --ds-typography-base-text-decoration: none; --ds-typography-base-text-transform: none; + --ds-typography-base: var(--ds-typography-base-font-style) var(--ds-typography-base-font-weight) var(--ds-typography-base-font-size)/var(--ds-typography-base-line-height) var(--ds-typography-base-font-family); } } @@ -141,8 +143,8 @@ font-family: var(--ds-typography-base-font-family); font-size: var(--ds-typography-base-font-size); font-style: var(--ds-typography-base-font-style); - font-variant-numeric: var(--ds-typography-base-font-variant-numeric); font-weight: var(--ds-typography-base-font-weight); + font-variant-numeric: var(--ds-typography-base-font-variant-numeric); letter-spacing: var(--ds-typography-base-letter-spacing); line-height: var(--ds-typography-base-line-height); text-decoration: var(--ds-typography-base-text-decoration); @@ -538,9 +540,9 @@ } .text-color-gradient-blue-to-green { + background: -webkit-linear-gradient(var(--ds-color-gradient-blue-to-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - background: -webkit-linear-gradient(var(--ds-color-gradient-blue-to-green)); } .text-color-semantic-primary { diff --git a/packages/plugin-css/test/lib.test.ts b/packages/plugin-css/test/lib.test.ts index c7eb6e0dd..248cc3130 100644 --- a/packages/plugin-css/test/lib.test.ts +++ b/packages/plugin-css/test/lib.test.ts @@ -208,37 +208,37 @@ describe('printRules', () => { ]; expect(printRules(rules)).toMatchInlineSnapshot(` ":root { + color-scheme: light dark; --color-blue-6: #acd8fc; --color-blue-7: #8ec8f6; - color-scheme: light dark; } @media (prefers-color-scheme: light) { :root { + color-scheme: light; --color-blue-6: #acd8fc; --color-blue-7: #8ec8f6; - color-scheme: light; } } [data-color-theme="light"] { + color-scheme: light; --color-blue-6: #acd8fc; --color-blue-7: #8ec8f6; - color-scheme: light; } @media (prefers-color-scheme: dark) { :root { + color-scheme: dark; --color-blue-6: #104d87; --color-blue-7: #205d9e; - color-scheme: dark; } } [data-color-theme="dark"] { + color-scheme: dark; --color-blue-6: #104d87; --color-blue-7: #205d9e; - color-scheme: dark; }" `); }); diff --git a/packages/plugin-sass/src/build.ts b/packages/plugin-sass/src/build.ts index b6e1bc0a4..708276b6d 100644 --- a/packages/plugin-sass/src/build.ts +++ b/packages/plugin-sass/src/build.ts @@ -1,54 +1,115 @@ -import type { BuildHookOptions } from '@terrazzo/parser'; -import { FORMAT_ID as CSS_FORMAT_ID } from '@terrazzo/plugin-css'; -import { makeCSSVar } from '@terrazzo/token-tools/css'; -import wcmatch from 'wildcard-match'; -import { FILE_HEADER, MIXIN_TOKEN, MIXIN_TYPOGRAPHY, type SassPluginOptions } from './lib.js'; +import { type BuildHookOptions, MULTI_VALUE } from '@terrazzo/parser'; +import { getTokenMatch } from '@terrazzo/token-tools'; +import { FORMAT_ID, type SassPluginOptions } from './lib.js'; +import { CssVarReferenceSassToken, RootSassToken, type SassMapKey, type SassMapValue, type SassToken } from './node.js'; export interface BuildParams { getTransforms: BuildHookOptions['getTransforms']; options?: SassPluginOptions; } -export default function build({ getTransforms, options }: BuildParams): string { - const tokens = getTransforms({ format: CSS_FORMAT_ID, id: '*', mode: '.' }); +const FONT_SHORTHAND_PROPERTIES = [ + 'font-family', + 'font-size', + 'font-style', + 'font-variant', + 'font-weight', + 'line-height', +]; - const output: string[] = [FILE_HEADER, '']; +const SASS_HEADER = `//// +/// Autogenerated by ⛋ Terrazzo. DO NOT EDIT! +//// +`; - const shouldExclude = wcmatch(options?.exclude ?? []); +const SASS_LIB = `@function token($tokenName) { + @if not map.has-key($__token-values, $tokenName) { + @error 'No token named "#{$tokenName}"'; + } + + $token: map.get($__token-values, $tokenName); + + @if $token == "__tz-error-typography" { + @error "This is a typography mixin. Use \`@include typography("#{tokenId}")\` instead."; + } + + @return $token; +} + +@mixin typography($tokenName) { + @if not map.has-key($__token-typography-mixins, $tokenName) { + @error 'No typography mixin named "#{$tokenName}"'; + } + + $mixin: map.get($__token-typography-mixins, $tokenName); - // main values - output.push('$__token-values: ('); - for (const token of tokens) { - if (shouldExclude(token.token.id)) { + @each $_property, $_value in $mixin { + #{$_property}: #{$_value}; + } +} +`; + +export default async function build({ getTransforms, options }: BuildParams): Promise { + const root = new RootSassToken(); + root.appendString(SASS_HEADER); + root.appendUse('sass:list'); + root.appendUse('sass:map'); + root.appendBlankLine(); + + const tokenValuesMap = root.createMap(); + + for (const token of getTransforms({ format: FORMAT_ID, id: '*', mode: '.' })) { + if (getTokenMatch(token.token.id, options?.exclude ?? [])) { continue; } - // typography tokens handled later - if (token.token.$type === 'typography') { - output.push(` "${token.token.id}": ( - "__tz-error": 'This is a typography mixin. Use \`@include typography("${token.token.id}")\` instead.', - ),`); + const tokenId = token.token.id; + const tokenName = token.localID ?? tokenId; + if (token.token.$type === 'typography' && token.type === MULTI_VALUE) { + const tokenValue = token.value; + const typographySassVars = new Map( + Object.keys(tokenValue).map((key) => [ + `${tokenId}.${key}`, + new CssVarReferenceSassToken(`${tokenName}-${key}`), + ]), + ); + if ('font-size' in tokenValue && 'font-family' in tokenValue) { + typographySassVars.set(tokenId, new CssVarReferenceSassToken(tokenName)); + } + tokenValuesMap.extend(typographySassVars); } else { - const name = token.localID ?? token.token.id; - output.push(` "${token.token.id}": (${makeCSSVar(name, { wrapVar: true })}),`); + tokenValuesMap.set(tokenId, new CssVarReferenceSassToken(tokenName)); } } - output.push(');', ''); + root.appendVariableDefinition('$__token-values', tokenValuesMap); + root.appendBlankLine(); + const tokenTypographyMixinsMap = root.createMap(); - // typography mixins - output.push('$__token-typography-mixins: ('); - - const typographyTokens = getTransforms({ format: CSS_FORMAT_ID, id: '*', mode: '.', $type: 'typography' }); - for (const token of typographyTokens) { - output.push(` "${token.token.id}": (`); - for (const property of Object.keys(token.value)) { - const name = `${token.localID ?? token.token.id}-${property}`; - output.push(` "${property}": (${makeCSSVar(name, { wrapVar: true })}),`); + for (const token of getTransforms({ format: 'css', id: '*', mode: '.', $type: 'typography' })) { + if (typeof token.value === 'string') { + continue; } - output.push(' ),'); + const tokenId = token.token.id; + const tokenName = token.localID ?? tokenId; + const tokenValue = token.value; + const values = { ...token.value }; + const fontMap = tokenTypographyMixinsMap.createMap(); + if ('font-size' in tokenValue && 'font-family' in tokenValue) { + fontMap.set('font', new CssVarReferenceSassToken(`${tokenName}`)); + for (const property of FONT_SHORTHAND_PROPERTIES) { + delete values[property]; + } + } + fontMap.extend( + Object.keys(values).map( + (propertyName) => + [propertyName, new CssVarReferenceSassToken(`${tokenName}-${propertyName}`)] as [SassMapKey, SassMapValue], + ), + ); + tokenTypographyMixinsMap.set(tokenId, fontMap); } - output.push(');', ''); - - output.push(MIXIN_TOKEN, '', MIXIN_TYPOGRAPHY, ''); - return output.join('\n'); + root.appendVariableDefinition('$__token-typography-mixins', tokenTypographyMixinsMap); + root.appendBlankLine(); + root.appendString(SASS_LIB); + return root.toString(); } diff --git a/packages/plugin-sass/src/index.ts b/packages/plugin-sass/src/index.ts index a28f662cd..409b2f22b 100644 --- a/packages/plugin-sass/src/index.ts +++ b/packages/plugin-sass/src/index.ts @@ -3,7 +3,9 @@ import { FORMAT_ID as CSS_FORMAT_ID } from '@terrazzo/plugin-css'; import build from './build.js'; import { FORMAT_ID, type SassPluginOptions } from './lib.js'; +export * from './build.js'; export * from './lib.js'; +export * from './node.js'; export default function pluginSass(options?: SassPluginOptions): Plugin { const filename = options?.filename ?? 'index.scss'; @@ -41,7 +43,7 @@ Please install @terrazzo/plugin-css and follow setup to add to your config.`, }, async build({ getTransforms, outputFile }) { - const output = build({ getTransforms, options }); + const output = await build({ getTransforms, options }); outputFile(filename, output); }, }; diff --git a/packages/plugin-sass/src/lib.ts b/packages/plugin-sass/src/lib.ts index 602ff6cc1..ca400122c 100644 --- a/packages/plugin-sass/src/lib.ts +++ b/packages/plugin-sass/src/lib.ts @@ -42,3 +42,9 @@ export const MIXIN_TYPOGRAPHY = `@mixin typography($tokenName, $modeName: ".") { #{$_property}: #{$_value}; } }`; + +const INDENT_NUM_SPACES = 2; + +export function getIndent(indentationLevel: number): string { + return indentationLevel > 0 ? ' '.repeat(indentationLevel * INDENT_NUM_SPACES) : ''; +} diff --git a/packages/plugin-sass/src/node.ts b/packages/plugin-sass/src/node.ts new file mode 100644 index 000000000..c0145edee --- /dev/null +++ b/packages/plugin-sass/src/node.ts @@ -0,0 +1,159 @@ +import { makeCSSVar } from '@terrazzo/token-tools/css'; +import { getIndent } from './lib.js'; + +export type SassMapKey = string | number; +export type SassMapValue = string | SassToken; +export type SassMapValues = Record | Iterable<[SassMapKey, SassMapValue]>; + +export abstract class SassToken { + constructor(public readonly indentationLevel: number = 0) {} + + abstract format(): string; + + public toString(): string { + return `${getIndent(this.indentationLevel)}${this.format()}`; + } + + public createMap(values?: SassMapValues): SassMap { + return new SassMap(this.indentationLevel + 1, values); + } + + public createVariableDefinition(name: string, value: SassToken): VariableDefinitionSassToken { + return new VariableDefinitionSassToken(this.indentationLevel + 1, name, value); + } +} + +export abstract class ValueSassToken extends SassToken { + public toString(): string { + return this.format(); + } +} + +export class StringSassToken extends SassToken { + constructor( + public readonly value: string, + indentationLevel = 0, + ) { + super(indentationLevel); + } + + public format(): string { + return this.value; + } +} + +export class CssVarReferenceSassToken extends StringSassToken { + public format(): string { + return `${makeCSSVar(this.value, { wrapVar: true })}`; + } +} + +export class BlankLineSassToken extends StringSassToken { + constructor() { + super(''); + } +} + +export class RootSassToken extends SassToken { + private readonly SEPARATOR = '\n'; + + private sassTokens: SassToken[]; + + constructor() { + super(-1); + this.sassTokens = []; + } + + public append(sassToken: SassToken) { + this.sassTokens.push(sassToken); + } + + public appendString(value: string) { + this.append(new StringSassToken(value)); + } + + public appendVariableDefinition(name: string, sassToken: SassToken) { + this.append(this.createVariableDefinition(name, sassToken)); + } + + public appendBlankLine() { + this.append(new BlankLineSassToken()); + } + + public appendUse(value: string, as_?: string) { + this.append(new UseSassToken(value, as_)); + } + + public format(): string { + return this.sassTokens.map((sassToken) => sassToken).join(this.SEPARATOR); + } +} + +export class SassMap extends ValueSassToken { + private readonly MAP_OPEN = '('; + private readonly MAP_CLOSE = ')'; + private readonly MAP_VALUE_SEPARATOR = ',\n'; + + private readonly SEPARATOR = '\n'; + + private readonly values: Map; + + constructor(indentationLevel: number, values?: SassMapValues) { + super(indentationLevel); + this.values = new Map(values ? this.sassMapValuesToIter(values) : undefined); + } + + public set(key: SassMapKey, value: SassMapValue) { + this.values.set(key, value); + } + + public extend(values: SassMapValues) { + for (const [key, value] of this.sassMapValuesToIter(values)) { + this.set(key, value); + } + } + + public setMap(key: SassMapKey, values: SassMapValues) { + const nestedMap = this.createMap(values); + this.set(key, nestedMap); + return nestedMap; + } + + public format(): string { + return [ + this.MAP_OPEN, + Array.from( + this.values + .entries() + .map(([key, value]) => new StringSassToken(`"${key}": ${value}`, this.indentationLevel + 1)), + ).join(this.MAP_VALUE_SEPARATOR), + new StringSassToken(this.MAP_CLOSE, this.indentationLevel), + ].join(this.SEPARATOR); + } + + private sassMapValuesToIter(values: SassMapValues) { + return Symbol.iterator in values && typeof values[Symbol.iterator] === 'function' ? values : Object.entries(values); + } +} + +export class UseSassToken extends StringSassToken { + constructor(value: string, as_?: string) { + const valueQuoted = `"${value}"`; + const atUseUrl = as_ ? `${valueQuoted} as ${as_}` : valueQuoted; + super(`@use ${atUseUrl};`); + } +} + +export class VariableDefinitionSassToken extends SassToken { + constructor( + indentationLevel: number, + public readonly name: string, + public readonly value: SassToken, + ) { + super(indentationLevel); + } + + public format(): string { + return `${this.name}: ${this.value};`; + } +} diff --git a/packages/plugin-sass/test/fixtures/basic/want.scss b/packages/plugin-sass/test/fixtures/basic/want.scss index bd3aeb10c..4ae0af70e 100644 --- a/packages/plugin-sass/test/fixtures/basic/want.scss +++ b/packages/plugin-sass/test/fixtures/basic/want.scss @@ -4,88 +4,66 @@ @use "sass:list"; @use "sass:map"; -@use "sass:meta"; $__token-values: ( - "border.std": (var(--ds-border-std)), - "color.blue": (var(--ds-color-blue)), - "color.green": (var(--ds-color-green)), - "color.red": (var(--ds-color-red)), - "color.redgreenblue": (var(--ds-color-redgreenblue)), - "gradient.g-b": (var(--ds-gradient-g-b)), - "shadow": (var(--ds-shadow)), - "transition": (var(--ds-transition)), - "typography.body": ( - "__tz-error": 'This is a typography mixin. Use `@include typography("typography.body")` instead.', - ), - "typography.callout": ( - "__tz-error": 'This is a typography mixin. Use `@include typography("typography.callout")` instead.', - ), - "typography.family.body": (var(--ds-typography-family-body)), - "typography.family.heading": (var(--ds-typography-family-heading)), - "typography.page-title": ( - "__tz-error": 'This is a typography mixin. Use `@include typography("typography.page-title")` instead.', - ), - "typography.subheading": ( - "__tz-error": 'This is a typography mixin. Use `@include typography("typography.subheading")` instead.', - ), + "border.std": var(--border-std), + "color.blue": var(--color-blue), + "color.green": var(--color-green), + "color.red": var(--color-red), + "color.redgreenblue": var(--color-redgreenblue), + "gradient.g-b": var(--gradient-g-b), + "shadow": var(--shadow), + "transition": var(--transition), + "typography.body": var(--typography-body), + "typography.callout": var(--typography-callout), + "typography.family.body": var(--typography-family-body), + "typography.family.heading": var(--typography-family-heading), + "typography.page-title": var(--typography-page-title), + "typography.subheading": var(--typography-subheading) ); $__token-typography-mixins: ( "typography.body": ( - "font-family": (var(--ds-typography-body-font-family)), - "font-size": (var(--ds-typography-body-font-size)), - "font-weight": (var(--ds-typography-body-font-weight)), - "line-height": (var(--ds-typography-body-line-height)), - "letter-spacing": (var(--ds-typography-body-letter-spacing)), + "font": var(--ds-typography-body), + "letter-spacing": var(--ds-typography-body-letter-spacing) ), "typography.callout": ( - "font-family": (var(--ds-typography-callout-font-family)), - "font-size": (var(--ds-typography-callout-font-size)), - "font-weight": (var(--ds-typography-callout-font-weight)), - "font-style": (var(--ds-typography-callout-font-style)), - "line-height": (var(--ds-typography-callout-line-height)), - "letter-spacing": (var(--ds-typography-callout-letter-spacing)), + "font": var(--ds-typography-callout), + "letter-spacing": var(--ds-typography-callout-letter-spacing) ), "typography.page-title": ( - "font-family": (var(--ds-typography-page-title-font-family)), - "font-size": (var(--ds-typography-page-title-font-size)), - "font-weight": (var(--ds-typography-page-title-font-weight)), - "line-height": (var(--ds-typography-page-title-line-height)), - "letter-spacing": (var(--ds-typography-page-title-letter-spacing)), + "font": var(--ds-typography-page-title), + "letter-spacing": var(--ds-typography-page-title-letter-spacing) ), "typography.subheading": ( - "font-family": (var(--ds-typography-subheading-font-family)), - "font-size": (var(--ds-typography-subheading-font-size)), - "font-weight": (var(--ds-typography-subheading-font-weight)), - "line-height": (var(--ds-typography-subheading-line-height)), - "letter-spacing": (var(--ds-typography-subheading-letter-spacing)), - "text-transform": (var(--ds-typography-subheading-text-transform)), - ), + "font": var(--ds-typography-subheading), + "letter-spacing": var(--ds-typography-subheading-letter-spacing), + "text-transform": var(--ds-typography-subheading-text-transform) + ) ); @function token($tokenName) { - @if map.has-key($__token-values, $tokenName) == false { + @if not map.has-key($__token-values, $tokenName) { @error 'No token named "#{$tokenName}"'; } - $_token: map.get($__token-values, $tokenName); - @if meta.type-of($_token) == map and map.has-key($_token, "__tz-error") { - @error map.get($_token, "__tz-error"); + + $token: map.get($__token-values, $tokenName); + + @if $token == "__tz-error-typography" { + @error "This is a typography mixin. Use `@include typography("#{tokenId}")` instead."; } - @return $_token; + @return $token; } -@mixin typography($tokenName, $modeName: ".") { - @if map.has-key($__token-typography-mixins, $tokenName) == false { +@mixin typography($tokenName) { + @if not map.has-key($__token-typography-mixins, $tokenName) { @error 'No typography mixin named "#{$tokenName}"'; } - $_mixin: map.get($__token-typography-mixins, $tokenName); - $_properties: map.get($_mixin, "."); - @if map.has-key($_mixin) { - $_properties: map.get($_mixin); - } - @each $_property, $_value in $_properties { + + $mixin: map.get($__token-typography-mixins, $tokenName); + + @each $_property, $_value in $mixin { #{$_property}: #{$_value}; } } diff --git a/packages/plugin-token-listing/src/build.ts b/packages/plugin-token-listing/src/build.ts index d825cdca7..7333d4f97 100644 --- a/packages/plugin-token-listing/src/build.ts +++ b/packages/plugin-token-listing/src/build.ts @@ -1,4 +1,5 @@ -import type { Logger, ModeMap, Plugin, TokenNormalized, TokenTransformed, TransformParams } from '@terrazzo/parser'; +import type { Logger, ModeMap, Plugin, TokenNormalized, TransformParams } from '@terrazzo/parser'; +import type { TokenTransformed } from '@terrazzo/token-tools'; import type { PlatformOption, TokenListing, TokenListingExtension, TokenListingPluginOptions } from './lib.js'; import { computePreviewValue } from './utils/previewValue.js'; import mapValues from './utils/utils.js'; diff --git a/packages/token-tools/src/css/lib.ts b/packages/token-tools/src/css/lib.ts index 0f640eac8..0f798ba98 100644 --- a/packages/token-tools/src/css/lib.ts +++ b/packages/token-tools/src/css/lib.ts @@ -11,15 +11,33 @@ export function defaultAliasTransform(token: TokenNormalized) { } /** Generate shorthand CSS for select token types */ -export function generateShorthand({ $type, localID }: { $type: string; localID: string }): string | undefined { - switch ($type) { +export function generateShorthand({ token, localID }: { token: TokenNormalized; localID: string }): string | undefined { + switch (token.$type) { case 'transition': { return ['duration', 'delay', 'timing-function'] .map((p) => makeCSSVar(`${localID}-${p}`, { wrapVar: true })) .join(' '); } - // note: "typography" is not set in shorthand because it can often unset values unintentionally. - // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font + case 'typography': { + const typeVar = (name: string) => makeCSSVar(`${localID}-${name}`, { wrapVar: true }); + // Note: typography tokens should have both of these properties, but this is just being defensive + if ('font-size' in token.$value && 'font-family' in token.$value) { + let output = ''; + for (const prop of ['font-style', 'font-variant', 'font-weight']) { + if (prop in token.$value) { + output += ` ${typeVar(prop)}`; + } + } + let fontSizeVar = typeVar('font-size'); + if ('line-height' in token.$value) { + fontSizeVar += `/${typeVar('line-height')}`; + } + output += ` ${fontSizeVar}`; + output += ` ${typeVar('font-family')}`; + return output.trim(); + } + break; + } } } diff --git a/packages/token-tools/src/types.ts b/packages/token-tools/src/types.ts index 7589a5396..5a779464c 100644 --- a/packages/token-tools/src/types.ts +++ b/packages/token-tools/src/types.ts @@ -26,7 +26,6 @@ export type Token = export type TokensSet = Record; -// TODO: Update with JSON pointer export type AliasValue = string; export interface AliasToken extends TokenCore { @@ -583,3 +582,40 @@ export interface TypographyValueNormalized { textTransform?: string; [key: string]: unknown; } + +export interface TokenTransformedBase { + /** Original Token ID */ + id: string; + /** ID unique to this format. */ + localID?: string; + /** + * The mode of this value + * @default "." + */ + mode: string; + /** The original token. */ + token: TokenNormalized; + /** Arbitrary metadata set by plugins. */ + meta?: Record & { + /** + * Metadata for the token-listing plugin. Plugins can + * set this to be the name of a token as it appears in code, + * and the token-listing plugin will pick it up and use it. + */ + 'token-listing'?: { name: string | undefined }; + }; +} + +/** Transformed token with a single value. Note that this may be any type! */ +export interface TokenTransformedSingleValue extends TokenTransformedBase { + type: 'SINGLE_VALUE'; + value: string; +} + +/** Transformed token with multiple values. Note that this may be any type! */ +export interface TokenTransformedMultiValue extends TokenTransformedBase { + type: 'MULTI_VALUE'; + value: Record; +} + +export type TokenTransformed = TokenTransformedSingleValue | TokenTransformedMultiValue; diff --git a/packages/tokens/dist/index.css b/packages/tokens/dist/index.css index 53320d245..501b761ed 100644 --- a/packages/tokens/dist/index.css +++ b/packages/tokens/dist/index.css @@ -69,65 +69,75 @@ --tz-ease-quint-in-out: cubic-bezier(0.83, 0, 0.17, 1); --tz-ease-quint-out: cubic-bezier(0.22, 1, 0.36, 1); --tz-font-body-font-family: var(--tz-font-sans); - --tz-font-body-font-size: 0.875rem; --tz-font-body-font-variation-settings: "wght" 400; --tz-font-body-font-weight: 400; + --tz-font-body-font-size: 0.875rem; --tz-font-body-letter-spacing: 0; --tz-font-body-line-height: 1.4375; + --tz-font-body: var(--tz-font-body-font-weight) var(--tz-font-body-font-size)/var(--tz-font-body-line-height) var(--tz-font-body-font-family); --tz-font-body-longform-font-family: var(--tz-font-sans); - --tz-font-body-longform-font-size: 1.125rem; --tz-font-body-longform-font-variation-settings: "wght" 400; --tz-font-body-longform-font-weight: 400; - --tz-font-body-longform-letter-spacing: -0.0025rem; + --tz-font-body-longform-font-size: 1.125rem; --tz-font-body-longform-line-height: 1.4375; + --tz-font-body-longform-letter-spacing: -0.0025rem; + --tz-font-body-longform: var(--tz-font-body-longform-font-weight) var(--tz-font-body-longform-font-size)/var(--tz-font-body-longform-line-height) var(--tz-font-body-longform-font-family); --tz-font-body-strong-font-family: var(--tz-font-sans); - --tz-font-body-strong-font-size: 0.875rem; --tz-font-body-strong-font-variation-settings: "wght" 500; --tz-font-body-strong-font-weight: 400; + --tz-font-body-strong-font-size: 0.875rem; --tz-font-body-strong-letter-spacing: 0; --tz-font-body-strong-line-height: 1.4375; + --tz-font-body-strong: var(--tz-font-body-strong-font-weight) var(--tz-font-body-strong-font-size)/var(--tz-font-body-strong-line-height) var(--tz-font-body-strong-font-family); --tz-font-heading1-font-family: var(--tz-font-sans); - --tz-font-heading1-font-size: 1.75rem; --tz-font-heading1-font-variation-settings: "wght" 600; --tz-font-heading1-font-weight: 400; - --tz-font-heading1-letter-spacing: -0.0075rem; + --tz-font-heading1-font-size: 1.75rem; --tz-font-heading1-line-height: 1.5; + --tz-font-heading1-letter-spacing: -0.0075rem; + --tz-font-heading1: var(--tz-font-heading1-font-weight) var(--tz-font-heading1-font-size)/var(--tz-font-heading1-line-height) var(--tz-font-heading1-font-family); --tz-font-heading2-font-family: var(--tz-font-sans); - --tz-font-heading2-font-size: 1.5rem; --tz-font-heading2-font-variation-settings: "wght" 600; --tz-font-heading2-font-weight: 400; - --tz-font-heading2-letter-spacing: -0.00625rem; + --tz-font-heading2-font-size: 1.5rem; --tz-font-heading2-line-height: 1.875rem; + --tz-font-heading2-letter-spacing: -0.00625rem; + --tz-font-heading2: var(--tz-font-heading2-font-weight) var(--tz-font-heading2-font-size)/var(--tz-font-heading2-line-height) var(--tz-font-heading2-font-family); --tz-font-heading3-font-family: var(--tz-font-sans); - --tz-font-heading3-font-size: 1.25rem; --tz-font-heading3-font-variation-settings: "wght" 500; --tz-font-heading3-font-weight: 400; - --tz-font-heading3-letter-spacing: -0.005rem; + --tz-font-heading3-font-size: 1.25rem; --tz-font-heading3-line-height: 1.4; + --tz-font-heading3-letter-spacing: -0.005rem; + --tz-font-heading3: var(--tz-font-heading3-font-weight) var(--tz-font-heading3-font-size)/var(--tz-font-heading3-line-height) var(--tz-font-heading3-font-family); --tz-font-heading4-font-family: var(--tz-font-sans); - --tz-font-heading4-font-size: 1.125rem; --tz-font-heading4-font-variation-settings: "wght" 500; --tz-font-heading4-font-weight: 400; + --tz-font-heading4-font-size: 1.125rem; --tz-font-heading4-letter-spacing: -0.0025rem; --tz-font-heading4-line-height: 1.4375; + --tz-font-heading4: var(--tz-font-heading4-font-weight) var(--tz-font-heading4-font-size)/var(--tz-font-heading4-line-height) var(--tz-font-heading4-font-family); --tz-font-heading5-font-family: var(--tz-font-sans); - --tz-font-heading5-font-size: 1rem; --tz-font-heading5-font-variation-settings: "wght" 500; --tz-font-heading5-font-weight: 400; + --tz-font-heading5-font-size: 1rem; --tz-font-heading5-letter-spacing: 0; --tz-font-heading5-line-height: 1.4375; + --tz-font-heading5: var(--tz-font-heading5-font-weight) var(--tz-font-heading5-font-size)/var(--tz-font-heading5-line-height) var(--tz-font-heading5-font-family); --tz-font-heading6-font-family: var(--tz-font-body-strong-font-family); - --tz-font-heading6-font-size: var(--tz-font-body-strong-font-size); --tz-font-heading6-font-variation-settings: var(--tz-font-body-strong-font-variation-settings); --tz-font-heading6-font-weight: var(--tz-font-body-strong-font-weight); + --tz-font-heading6-font-size: var(--tz-font-body-strong-font-size); --tz-font-heading6-letter-spacing: var(--tz-font-body-strong-letter-spacing); --tz-font-heading6-line-height: var(--tz-font-body-strong-line-height); + --tz-font-heading6: var(--tz-font-heading6-font-weight) var(--tz-font-heading6-font-size)/var(--tz-font-heading6-line-height) var(--tz-font-heading6-font-family); --tz-font-label-small-font-family: var(--tz-font-sans); - --tz-font-label-small-font-size: 0.75rem; --tz-font-label-small-font-variation-settings: "wght" 500; --tz-font-label-small-font-weight: 400; - --tz-font-label-small-letter-spacing: 0.0025rem; + --tz-font-label-small-font-size: 0.75rem; --tz-font-label-small-line-height: 1.25; + --tz-font-label-small-letter-spacing: 0.0025rem; + --tz-font-label-small: var(--tz-font-label-small-font-weight) var(--tz-font-label-small-font-size)/var(--tz-font-label-small-line-height) var(--tz-font-label-small-font-family); --tz-font-mono: "Fragment Mono", ui-monospace, monospace; --tz-font-sans: "Instrument Sans", system-ui, -apple-system, "Aptos", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", sans-serif, "Helvetica", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; --tz-layer-base: 10; @@ -166,10 +176,6 @@ @media (prefers-color-scheme: light) { :root { - --tz-border-1: 1px solid var(--tz-color-border-1); - --tz-border-2: 1px solid var(--tz-color-border-2); - --tz-border-3: 1px solid var(--tz-color-border-3); - --tz-border-focus: 2px solid var(--tz-color-border-focus); --tz-color-bg-1: var(--tz-color-base-gray-1000); --tz-color-bg-2: var(--tz-color-base-gray-950); --tz-color-bg-3: var(--tz-color-base-gray-950); @@ -186,14 +192,14 @@ --tz-color-text-3: var(--tz-color-base-gray-600); --tz-color-text-error: var(--tz-color-base-gray-1000); --tz-color-text-selected: var(--tz-color-base-blue-700); + --tz-border-1: 1px solid var(--tz-color-border-1); + --tz-border-2: 1px solid var(--tz-color-border-2); + --tz-border-3: 1px solid var(--tz-color-border-3); + --tz-border-focus: 2px solid var(--tz-color-border-focus); } } [data-color-mode="light"][data-color-mode="light"] { - --tz-border-1: 1px solid var(--tz-color-border-1); - --tz-border-2: 1px solid var(--tz-color-border-2); - --tz-border-3: 1px solid var(--tz-color-border-3); - --tz-border-focus: 2px solid var(--tz-color-border-focus); --tz-color-bg-1: var(--tz-color-base-gray-1000); --tz-color-bg-2: var(--tz-color-base-gray-950); --tz-color-bg-3: var(--tz-color-base-gray-950); @@ -210,14 +216,14 @@ --tz-color-text-3: var(--tz-color-base-gray-600); --tz-color-text-error: var(--tz-color-base-gray-1000); --tz-color-text-selected: var(--tz-color-base-blue-700); + --tz-border-1: 1px solid var(--tz-color-border-1); + --tz-border-2: 1px solid var(--tz-color-border-2); + --tz-border-3: 1px solid var(--tz-color-border-3); + --tz-border-focus: 2px solid var(--tz-color-border-focus); } @media (prefers-color-scheme: dark) { :root { - --tz-border-1: 1px solid var(--tz-color-border-1); - --tz-border-2: 1px solid var(--tz-color-border-2); - --tz-border-3: 1px solid var(--tz-color-border-3); - --tz-border-focus: 2px solid var(--tz-color-border-focus); --tz-color-bg-1: var(--tz-color-base-gray-100); --tz-color-bg-2: var(--tz-color-base-gray-200); --tz-color-bg-3: var(--tz-color-base-gray-300); @@ -234,14 +240,14 @@ --tz-color-text-3: var(--tz-color-base-gray-700); --tz-color-text-error: var(--tz-color-base-gray-1000); --tz-color-text-selected: var(--tz-color-base-blue-600); + --tz-border-1: 1px solid var(--tz-color-border-1); + --tz-border-2: 1px solid var(--tz-color-border-2); + --tz-border-3: 1px solid var(--tz-color-border-3); + --tz-border-focus: 2px solid var(--tz-color-border-focus); } } [data-color-mode="dark"][data-color-mode="dark"] { - --tz-border-1: 1px solid var(--tz-color-border-1); - --tz-border-2: 1px solid var(--tz-color-border-2); - --tz-border-3: 1px solid var(--tz-color-border-3); - --tz-border-focus: 2px solid var(--tz-color-border-focus); --tz-color-bg-1: var(--tz-color-base-gray-100); --tz-color-bg-2: var(--tz-color-base-gray-200); --tz-color-bg-3: var(--tz-color-base-gray-300); @@ -258,5 +264,9 @@ --tz-color-text-3: var(--tz-color-base-gray-700); --tz-color-text-error: var(--tz-color-base-gray-1000); --tz-color-text-selected: var(--tz-color-base-blue-600); + --tz-border-1: 1px solid var(--tz-color-border-1); + --tz-border-2: 1px solid var(--tz-color-border-2); + --tz-border-3: 1px solid var(--tz-color-border-3); + --tz-border-focus: 2px solid var(--tz-color-border-focus); } diff --git a/packages/tokens/terrazzo.config.js b/packages/tokens/terrazzo.config.ts similarity index 95% rename from packages/tokens/terrazzo.config.js rename to packages/tokens/terrazzo.config.ts index 1abcf3732..be5f58188 100644 --- a/packages/tokens/terrazzo.config.js +++ b/packages/tokens/terrazzo.config.ts @@ -23,7 +23,7 @@ export default defineConfig({ lint: { rules: { 'core/valid-color': ['error', { legacyFormat: true }], - 'core/consistent-naming': 'off' + 'core/consistent-naming': 'off', }, }, });